Tabs
JavaScriptTabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container.
Basics
There are two pieces to a tabbed interface: the tabs themselves, and the content for each tab. The tabs are an element with the class .tabs
, and each item has the class .tabs-title
. Each tab contains a link to a tab. The href
of each link should match the ID of a tab.
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
</ul>
The tab content container has the class .tabs-content
, while each section has the class .tabs-panel
. Each content pane also has a unique ID, which is targeted by a link in the tabstrip.
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel2">
<p>Suspendisse dictum feugiat nisl ut dapibus. Vivamus hendrerit arcu sed erat molestie vehicula. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
</div>
</div>
Put it all together, and we get this:
one
Check me out! I'm a super cool Tab panel with text content!
two

three
Check me out! I'm a super cool Tab panel with text content!
four

five
Check me out! I'm a super cool Tab panel with text content!
six

Vertical Tabs
Add the .vertical
class to a tabstrip to stack tabs vertically. You can also place the tabstrip and the tab contents in a grid to make them sit side-by-side.
<div class="row collapse">
<div class="medium-3 columns">
<ul class="tabs vertical" id="example-vert-tabs" data-tabs>
<li class="tabs-title is-active"><a href="#panel1v" aria-selected="true">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2v">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3v">Tab 3</a></li>
<li class="tabs-title"><a href="#panel4v">Tab 4</a></li>
<li class="tabs-title"><a href="#panel3v">Tab 5</a></li>
<li class="tabs-title"><a href="#panel4v">Tab 6</a></li>
</ul>
</div>
<div class="medium-9 columns">
<div class="tabs-content vertical" data-tabs-content="example-vert-tabs">
<div class="tabs-panel is-active" id="panel1v">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tabs-panel" id="panel2v">
<p>Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
</div>
<div class="tabs-panel" id="panel3v">
<img class="thumbnail" src="assets/img/generic/rectangle-3.jpg">
</div>
<div class="tabs-panel" id="panel4v">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="tabs-panel" id="panel5v">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="tabs-panel" id="panel6v">
<img class="thumbnail" src="assets/img/generic/rectangle-5.jpg">
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
Name | Type | Default Value | Description |
---|---|---|---|
$tab-margin |
Number | 0 |
Default margin of the tab bar. |
$tab-background |
Color | $white |
Default background color of a tab bar. |
$tab-background-active |
Color | $light-gray |
active background color of a tab bar. |
$tab-item-font-size |
Number | rem-calc(12) |
Font size of tab items. |
$tab-item-background-hover |
$white |
Default background color on hover for items in a Menu. |
|
$tab-item-padding |
Number | 1.25rem 1.5rem |
Default padding of a tab item. |
$tab-expand-max |
Number | 6 |
Maximum number of |
$tab-content-background |
Color | $white |
Default background color of tab content. |
$tab-content-border |
Color | $light-gray |
Default border color of tab content. |
$tab-content-color |
Color | foreground($tab-background, $primary-color) |
Default text color of tab content. |
$tab-content-padding |
Number or List | 1rem |
Default padding for tab content. |
Mixins
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
tabs-container
@include tabs-container;
Adds styles for a tab container. Apply this to a <ul>
.
tabs-container-vertical
@include tabs-container-vertical;
Augments a tab container to have vertical tabs. Use this in conjunction with tabs-container()
.
tabs-title
@include tabs-title;
Adds styles for the links within a tab container. Apply this to the <li>
elements inside a tab container.
tabs-content
@include tabs-content;
Adds styles for the wrapper that surrounds a tab group's content panes.
tabs-content-vertical
@include tabs-content-vertical;
Augments a tab content container to have a vertical style, by shifting the border around. Use this in conjunction with tabs-content()
.
tabs-panel
@include tabs-panel;
Adds styles for an individual tab content panel within the tab content container.
JavaScript Reference
Initializing
The following files must be included in your JavaScript to use this plugin:
foundation.core.js
-
foundation.tabs.js
- With utility library
foundation.util.keyboard.js
- With utility library
foundation.util.timerAndImageLoader.js
- With utility library
Foundation.Tabs
Creates a new instance of tabs.
var elem = new Foundation.Tabs(element, options);
Fires these events: Tabs#event:init
Name | Type | Description |
---|---|---|
element |
jQuery | jQuery object to make into tabs. |
options |
Object | Overrides to the default plugin settings. |
Plugin Options
Use these options to customize an instance of Tabs. Plugin options can be set as individual data attributes, one combined data-options
attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.
Name | Type | Default | Description |
---|---|---|---|
data-auto-focus |
|
|
Allows the window to scroll to content of active pane on load if set to true. |
data-wrap-on-keys |
|
|
Allows keyboard input to 'wrap' around the tab links. |
data-match-height |
|
|
Allows the tab content panes to match heights if set to true. |
data-link-class |
|
|
Class applied to `li`'s in tab link list. |
data-panel-class |
|
|
Class applied to the content containers. |
Events
These events will fire from any element with a Tabs plugin attached.
Name | Description |
---|---|
change.zf.tabs |
Fires when the plugin has successfully changed tabs. |
Methods
_handleTabChange
$('#element').foundation('_handleTabChange', $target);
Opens the tab $targetContent
defined by $target
.
Fires these events: Tabs#event:change
Name | Type | Description |
---|---|---|
$target |
jQuery | Tab to open. |
selectTab
$('#element').foundation('selectTab', elem);
Public method for selecting a content pane to display.
Name | Type | Description |
---|---|---|
elem |
jQuery | jQuery object or string of the id of the pane to display. |
destroy
$('#element').foundation('destroy');
Destroys an instance of an tabs.
Fires these events: Tabs#event:destroyed