Foundation's JavaScript components add interactive behavior to your HTML elements. All components follow a consistent API pattern and can be initialized individually or collectively. Each component supports extensive configuration through options objects.
The Foundation object provides the plugin system and global utilities.
/**
* Main Foundation object with plugin management
*/
interface Foundation {
version: string;
/** Register a plugin with the Foundation system */
plugin(plugin: Object, name: string): void;
/** Register a plugin instance */
registerPlugin(plugin: Object, name?: string): void;
/** Unregister a plugin instance */
unregisterPlugin(plugin: Object): void;
/** Re-initialize plugins on existing elements */
reInit(plugins?: Array<any>): void;
/** Initialize plugins on elements within specified container */
reflow(elem: Object, plugins?: Array<string> | string): void;
/** Check if site is in RTL mode */
rtl(): boolean;
/** Generate unique ID strings */
GetYoDigits(length: number, namespace?: string): string;
/** Escape string for use in regex */
RegExpEscape(str: string): string;
/** Get appropriate transition end event name */
transitionend(element: JQuery): any;
/** Handle element load events */
onLoad(elem: any, handler: any): string;
}
/** jQuery extension for Foundation */
interface JQuery {
foundation(method?: string | Array<any>, ...args: any[]): JQuery;
}Usage Examples:
// Initialize all Foundation components
$(document).foundation();
// Initialize specific components only
$(document).foundation('Dropdown Reveal Tabs');
// Re-initialize after dynamic content changes
Foundation.reflow($('#dynamic-content'));
// Call methods on components
$('#my-dropdown').foundation('open');
$('#my-modal').foundation('close');Interactive dropdown menus with positioning and hover/click support.
/**
* Dropdown component for interactive menus
*/
class Dropdown {
constructor(element: JQuery, options?: IDropdownOptions);
/** Open the dropdown */
open(): void;
/** Close the dropdown */
close(): void;
/** Toggle dropdown open/closed state */
toggle(): void;
}
interface IDropdownOptions {
/** Delay before opening on hover (milliseconds) */
hoverDelay?: number;
/** Enable hover trigger */
hover?: boolean;
/** Enable hover on pane itself */
hoverPane?: boolean;
/** Vertical offset from trigger */
vOffset?: number;
/** Horizontal offset from trigger */
hOffset?: number;
/** Dropdown position relative to trigger */
position?: string;
/** Dropdown alignment relative to trigger */
alignment?: string;
/** Allow dropdown to overlap boundaries */
allowOverlap?: boolean;
/** Allow overlap at bottom */
allowBottomOverlap?: boolean;
/** Trap focus within dropdown */
trapFocus?: boolean;
/** Auto-focus first element */
autoFocus?: boolean;
/** Close on outside click */
closeOnClick?: boolean;
/** Force dropdown to follow trigger */
forceFollow?: boolean;
}Multi-level dropdown navigation system.
/**
* Multi-level dropdown menu component
*/
class DropdownMenu {
constructor(element: JQuery, options?: IDropdownMenuOptions);
// No public methods - handles events automatically
}
interface IDropdownMenuOptions {
/** Disable hover functionality */
disableHover?: boolean;
/** Disable hover on touch devices */
disableHoverOnTouch?: boolean;
/** Auto-close submenus */
autoclose?: boolean;
/** Hover delay before opening */
hoverDelay?: number;
/** Enable click to open */
clickOpen?: boolean;
/** Time before closing menus */
closingTime?: number;
/** Submenu alignment */
alignment?: string;
/** Close on click anywhere */
closeOnClick?: boolean;
/** Close on click inside menu */
closeOnClickInside?: boolean;
/** Class for vertical menus */
verticalClass?: string;
/** Class for right-aligned menus */
rightClass?: string;
/** Force submenu to follow parent */
forceFollow?: boolean;
}Collapsible content sections with smooth animations.
/**
* Accordion component for collapsible content
*/
class Accordion {
constructor(element: JQuery, options?: IAccordionOptions);
/** Toggle accordion panel open/closed */
toggle(target: JQuery): void;
/** Open accordion panel */
down(target: JQuery, firstTime: boolean): void;
/** Close accordion panel */
up(target: JQuery): void;
}
interface IAccordionOptions {
/** Animation speed in milliseconds */
slideSpeed?: number;
/** Allow multiple panels open */
multiExpand?: boolean;
/** Allow all panels to be closed */
allowAllClosed?: boolean;
/** Enable deep linking to panels */
deepLink?: boolean;
/** Smooth scroll to active panel */
deepLinkSmudge?: boolean;
/** Delay before smooth scroll */
deepLinkSmudgeDelay?: number;
/** Offset for smooth scroll */
deepLinkSmudgeOffset?: number;
/** Update browser history */
updateHistory?: boolean;
}Tabbed interface for organizing content sections.
/**
* Tabs component for tabbed interfaces
*/
class Tabs {
constructor(element: JQuery, options?: ITabsOptions);
/** Select specific tab by element or ID */
selectTab(element: JQuery | string): void;
}
interface ITabsOptions {
/** Enable deep linking to tabs */
deepLink?: boolean;
/** Smooth scroll to active tab */
deepLinkSmudge?: boolean;
/** Delay before smooth scroll */
deepLinkSmudgeDelay?: number;
/** Offset for smooth scroll */
deepLinkSmudgeOffset?: number;
/** Update browser history */
updateHistory?: boolean;
/** Auto-focus tab content */
autoFocus?: boolean;
/** Wrap keyboard navigation */
wrapOnKeys?: boolean;
/** Match tab panel heights */
matchHeight?: boolean;
/** Allow active tab to collapse */
activeCollapse?: boolean;
/** CSS class for tab links */
linkClass?: string;
/** CSS class for active tab links */
linkActiveClass?: string;
/** CSS class for tab panels */
panelClass?: string;
/** CSS class for active tab panels */
panelActiveClass?: string;
}Sliding sidebar menu system with responsive behavior.
/**
* Off-canvas sliding menu component
*/
class OffCanvas {
constructor(element: JQuery, options?: IOffCanvasOptions);
/** Set reveal state */
reveal(isRevealed: boolean): void;
/** Open off-canvas menu */
open(event: Event, trigger: JQuery): void;
/** Close off-canvas menu */
close(cb?: Function): void;
/** Toggle off-canvas menu */
toggle(event: Event, trigger: JQuery): void;
}
interface IOffCanvasOptions {
/** Close menu on outside click */
closeOnClick?: boolean;
/** Show content overlay */
contentOverlay?: boolean;
/** ID of content container */
contentId?: string | null;
/** Allow nested off-canvas */
nested?: boolean;
/** Allow content scrolling when open */
contentScroll?: boolean;
/** Transition duration */
transitionTime?: string;
/** Transition type */
transition?: string;
/** Force positioning */
forceTo?: string | null;
/** Start in revealed state */
isRevealed?: boolean;
/** Breakpoint to reveal menu */
revealOn?: string | null;
/** Breakpoint to put menu in canvas */
inCanvasOn?: string | null;
/** Auto-focus menu when opened */
autoFocus?: boolean;
/** CSS class for revealed state */
revealClass?: string;
/** Trap focus within menu */
trapFocus?: boolean;
}Modal dialog system with customizable animations and sizing.
/**
* Modal dialog component
*/
class Reveal {
constructor(element: JQuery, options?: IRevealOptions);
/** Open modal */
open(): void;
/** Close modal */
close(): void;
/** Toggle modal open/closed */
toggle(): void;
}
interface IRevealOptions {
/** Opening animation class */
animationIn?: string;
/** Closing animation class */
animationOut?: string;
/** Delay before showing modal */
showDelay?: number;
/** Delay before hiding modal */
hideDelay?: number;
/** Close on outside click */
closeOnClick?: boolean;
/** Close on Escape key */
closeOnEsc?: boolean;
/** Allow multiple modals */
multipleOpened?: boolean;
/** Vertical offset */
vOffset?: number | string;
/** Horizontal offset */
hOffset?: number | string;
/** Full screen modal */
fullScreen?: boolean;
/** Show overlay */
overlay?: boolean;
/** Reset scroll position on close */
resetOnClose?: boolean;
/** Enable deep linking */
deepLink?: boolean;
/** Update browser history */
updateHistory?: boolean;
/** Element to append modal to */
appendTo?: string;
/** Additional overlay CSS classes */
additionalOverlayClasses?: string;
}Content slider/carousel with navigation controls.
/**
* Content slider/carousel component
*/
class Orbit {
constructor(element: JQuery, options?: IOrbitOptions);
/** Synchronize slide positions */
geoSync(): void;
/** Change to specific slide */
changeSlide(isLTR: boolean, chosenSlide?: JQuery, idx?: number): void;
}
interface IOrbitOptions {
/** Show bullet navigation */
bullets?: boolean;
/** Show next/prev buttons */
navButtons?: boolean;
/** Animation for entering from right */
animInFromRight?: string;
/** Animation for exiting to right */
animOutToRight?: string;
/** Animation for entering from left */
animInFromLeft?: string;
/** Animation for exiting to left */
animOutToLeft?: string;
/** Auto-advance slides */
autoPlay?: boolean;
/** Delay between auto-advance */
timerDelay?: number;
/** Enable infinite looping */
infiniteWrap?: boolean;
/** Enable touch/swipe support */
swipe?: boolean;
/** Pause on hover */
pauseOnHover?: boolean;
/** Enable accessibility features */
accessible?: boolean;
/** CSS class for container */
containerClass?: string;
/** CSS class for slides */
slideClass?: string;
/** Selector for bullet container */
boxOfBullets?: string;
/** CSS class for next button */
nextClass?: string;
/** CSS class for previous button */
prevClass?: string;
/** Use Motion UI animations */
useMUI?: boolean;
}Sticky navigation system that tracks scroll position and updates active navigation items.
/**
* Sticky navigation component for long content
*/
class Magellan {
constructor(element: JQuery, options?: IMagellanOptions);
/** Recalculate scroll trigger points */
calcPoints(): void;
/** Scroll to specific location */
scrollToLoc(location: string): void;
/** Recalculate layout after content changes */
reflow(): void;
}
interface IMagellanOptions {
/** Animation duration for scrolling */
animationDuration?: number;
/** Animation easing function */
animationEasing?: string;
/** Threshold for triggering active state */
threshold?: number;
/** CSS class for active navigation items */
activeClass?: string;
/** Enable deep linking */
deepLinking?: boolean;
/** Update browser history */
updateHistory?: boolean;
/** Offset for scroll calculations */
offset?: number;
}Responsive content swapping system for different screen sizes.
/**
* Responsive content loading component
*/
class Interchange {
constructor(element: JQuery, options?: IInterchangeOptions);
/** Replace content with new path */
replace(path: string): void;
}
interface IInterchangeOptions {
/** Rules for different breakpoints */
rules?: any[];
/** Content type ('image', 'background', etc.) */
type?: string;
}Smooth scrolling to anchor links and page sections.
/**
* Smooth scrolling component for anchor navigation
*/
class SmoothScroll {
constructor(element: JQuery, options?: ISmoothScrollOptions);
/** Scroll to location with animation */
scrollToLoc(loc: string, options: any, callback: Function): boolean;
}
interface ISmoothScrollOptions {
/** Animation duration */
animationDuration?: number;
/** Animation easing function */
animationEasing?: string;
/** Scroll threshold */
threshold?: number;
/** Scroll offset */
offset?: number;
}Responsive component that switches between accordion and tabs based on breakpoints.
/**
* Responsive accordion/tabs switching component
*/
class ResponsiveAccordionTabs {
constructor(element: JQuery, options?: IResponsiveAccordionTabsOptions);
/** Open section (delegates to active plugin) */
open(target: any, ...args: any[]): any;
/** Close section (delegates to active plugin) */
close(target: any, ...args: any[]): any;
/** Toggle section (delegates to active plugin) */
toggle(target: any, ...args: any[]): any;
/** Stored plugin data */
storezfData: any;
}
interface IResponsiveAccordionTabsOptions {
// Inherits options from both Accordion and Tabs components
}Menu component that changes behavior based on screen size.
/**
* Responsive menu behavior component
*/
class ResponsiveMenu {
constructor(element: JQuery, options?: IResponsiveMenuOptions);
// No public methods - auto-managed based on breakpoints
}
interface IResponsiveMenuOptions {
// Auto-configured based on breakpoints
}Toggle element visibility based on breakpoints.
/**
* Responsive visibility toggle component
*/
class ResponsiveToggle {
constructor(element: JQuery, options?: IResponsiveToggleOptions);
/** Toggle menu visibility */
toggleMenu(): void;
}
interface IResponsiveToggleOptions {
/** Breakpoint to hide element */
hideFor?: string;
/** Enable animations */
animate?: boolean;
}Contextual tooltip system with flexible positioning.
/**
* Tooltip component for contextual help
*/
class Tooltip {
constructor(element: JQuery, options?: ITooltipOptions);
/** Show tooltip */
show(): void;
/** Hide tooltip */
hide(): void;
/** Toggle tooltip visibility */
toggle(): void;
}
interface ITooltipOptions {
/** Delay before showing on hover */
hoverDelay?: number;
/** Fade in duration */
fadeInDuration?: number;
/** Fade out duration */
fadeOutDuration?: number;
/** Disable hover functionality */
disableHover?: boolean;
/** Disable on touch devices */
disableForTouch?: any;
/** CSS classes for template */
templateClasses?: string;
/** CSS class for tooltip */
tooltipClass?: string;
/** CSS class for trigger */
triggerClass?: string;
/** Event to show tooltip */
showOn?: string;
/** HTML template for tooltip */
template?: string;
/** Tooltip text content */
tipText?: string;
/** Text for touch close button */
touchCloseText?: string;
/** Enable click to open */
clickOpen?: boolean;
/** Tooltip position */
position?: string;
/** Tooltip alignment */
alignment?: string;
/** Allow overlap */
allowOverlap?: boolean;
/** Allow bottom overlap */
allowBottomOverlap?: boolean;
/** Vertical offset */
vOffset?: number;
/** Horizontal offset */
hOffset?: number;
/** Tooltip height */
tooltipHeight?: number;
/** Tooltip width */
tooltipWidth?: number;
/** Allow HTML content */
allowHtml?: boolean;
}Toggle element visibility and CSS classes.
/**
* Element visibility and class toggling component
*/
class Toggler {
constructor(element: JQuery, options?: ITogglerOptions);
/** Toggle target elements */
toggle(): void;
}
interface ITogglerOptions {
/** Target selector for toggling */
toggler?: string;
/** Enable animations */
animate?: boolean;
}Equal height columns and elements.
/**
* Equal height component for matching element heights
*/
class Equalizer {
constructor(element: JQuery, options?: IEqualizerOptions);
/** Get heights of elements */
getHeights(cb: Function): any[];
/** Get heights organized by row */
getHeightsByRow(cb: Function): any[];
/** Apply calculated heights */
applyHeight(heights: any[]): void;
/** Apply heights by row */
applyHeightByRow(groups: any[]): void;
}
interface IEqualizerOptions {
/** Equalize when stacked */
equalizeOnStack?: boolean;
/** Equalize by row */
equalizeByRow?: boolean;
/** Breakpoint to enable equalizing */
equalizeOn?: string;
}Slide-out off-canvas menus and panels.
/**
* Off-canvas menu component
*/
class OffCanvas {
constructor(element: JQuery, options?: IOffCanvasOptions);
/** Open the off-canvas panel */
open(event?: Event, trigger?: JQuery): void;
/** Close the off-canvas panel */
close(cb?: Function): void;
/** Toggle the off-canvas panel */
toggle(event?: Event, trigger?: JQuery): void;
/** Set reveal state */
reveal(isRevealed: boolean): void;
}
interface IOffCanvasOptions {
/** Close on content click */
closeOnClick?: boolean;
/** Show content overlay */
contentOverlay?: boolean;
/** Content container ID */
contentId?: string | null;
/** Enable nested off-canvas */
nested?: boolean;
/** Allow content scrolling */
contentScroll?: boolean;
/** Transition timing */
transitionTime?: string;
/** Transition type */
transition?: string;
/** Force reveal state */
forceTo?: string | null;
/** Auto-focus on open */
autoFocus?: boolean;
/** Trap focus */
trapFocus?: boolean;
}Sticky positioning component for elements.
/**
* Sticky positioning component
*/
class Sticky {
constructor(element: JQuery, options?: IStickyOptions);
/** Calculate sticky positioning */
_calc(checkSizes: boolean, scroll: number): boolean;
/** Remove sticky positioning */
_removeSticky(topOrBottom?: boolean): void;
/** Set element sizes */
_setSizes(cb?: Function): void;
/** Apply sticky positioning */
_setSticky(): void;
}
interface IStickyOptions {
/** Container selector */
container?: string;
/** Element to stick to */
stickTo?: string;
/** Anchor element ID */
anchor?: string;
/** Top anchor ID */
topAnchor?: string;
/** Bottom anchor ID */
btmAnchor?: string;
/** Top margin */
marginTop?: number;
/** Bottom margin */
marginBottom?: number;
/** Sticky CSS class */
stickyClass?: string;
/** Container CSS class */
containerClass?: string;
/** Check frequency */
checkEvery?: number;
}Range slider input component.
/**
* Range slider component
*/
class Slider {
constructor(element: JQuery, options?: ISliderOptions);
/** Set handle position */
_setHandlePos($hndl: JQuery, location: number, noInvert?: boolean, cb?: Function): boolean;
/** Set slider values */
_setValues($handle: JQuery, location: number): void;
/** Handle slider events */
_handleEvent(e: Event, $handle: JQuery, dimension: number): void;
}
interface ISliderOptions {
/** Start value */
start?: number;
/** End value */
end?: number;
/** Step increment */
step?: number;
/** Initial start value */
initialStart?: number;
/** Initial end value */
initialEnd?: number;
/** Enable two-way binding */
binding?: boolean;
/** Click to select */
clickSelect?: boolean;
/** Vertical orientation */
vertical?: boolean;
/** Enable dragging */
draggable?: boolean;
/** Disabled state */
disabled?: boolean;
/** Double-sided slider */
doubleSided?: boolean;
/** Decimal places */
decimal?: number;
/** Move animation time */
moveTime?: number;
/** Disabled class name */
disabledClass?: string;
/** Invert vertical */
invertVertical?: boolean;
/** Change event delay */
changedDelay?: number;
}Show/hide toggle component.
/**
* Toggle component for showing/hiding elements
*/
class Toggler {
constructor(element: JQuery, options?: ITogglerOptions);
/** Toggle element visibility */
toggle(): void;
/** Update ARIA attributes */
_updateARIA(isOn: boolean): void;
}
interface ITogglerOptions {
/** Enable animations */
animate?: boolean;
/** Toggle target selector */
toggler?: string;
/** Input selector */
input?: string;
/** Animation in class */
animationIn?: string;
/** Animation out class */
animationOut?: string;
/** Check class for inputs */
checkClass?: string;
}Collapsible content sections.
/**
* Accordion component for collapsible content
*/
class Accordion {
constructor(element: JQuery, options?: IAccordionOptions);
/** Expand accordion panel */
down($target: JQuery, firstTime: boolean): void;
/** Collapse accordion panel */
up($target: JQuery): void;
/** Toggle accordion panel */
toggle($target: JQuery): void;
}
interface IAccordionOptions {
/** Animation speed */
slideSpeed?: number;
/** Allow multiple expanded */
multiExpand?: boolean;
/** Allow all closed */
allowAllClosed?: boolean;
/** Enable deep linking */
deepLink?: boolean;
/** Deep link smoothing */
deepLinkSmudge?: boolean;
/** Deep link delay */
deepLinkSmudgeDelay?: number;
/** Deep link offset */
deepLinkSmudgeOffset?: number;
/** Update browser history */
updateHistory?: boolean;
}Nested accordion navigation menu.
/**
* Accordion menu component for nested navigation
*/
class AccordionMenu {
constructor(element: JQuery, options?: IAccordionMenuOptions);
/** Expand menu section */
down($target: JQuery, firstTime: boolean): void;
/** Collapse menu section */
up($target: JQuery): void;
/** Toggle menu section */
toggle($target: JQuery): void;
/** Hide all menu sections */
hideAll(): void;
/** Show all menu sections */
showAll(): void;
}
interface IAccordionMenuOptions {
/** Include parent link */
parentLink?: boolean;
/** Animation speed */
slideSpeed?: number;
/** Show submenu toggle */
submenuToggle?: boolean;
/** Submenu toggle text */
submenuToggleText?: string;
/** Allow multiple open */
multiOpen?: boolean;
}// Initialize individual component
new Foundation.Dropdown($('#my-dropdown'), {
hover: true,
hoverDelay: 300,
closeOnClick: true
});
// Initialize via jQuery plugin
$('#my-dropdown').foundation({
hover: true,
hoverDelay: 300
});
// Initialize all components
$(document).foundation();
// Initialize specific components
$(document).foundation('Dropdown Reveal Tabs');
// Access component instance
const dropdown = $('#my-dropdown').data('zfPlugin');
dropdown.open();