Foundation Tabs
Foundation provides tab components for organizing content into separate panes.
Basic Tabs
Live Preview: Basic Tabs
This is tab 1 content.
This is tab 2 content.
This is tab 3 content.
Foundation Code:
<ul class="tabs" data-tabs id="example-tabs">
<li class="tabs-title is-active"><a href="#panel1">Tab 1</a></li>
<li class="tabs-title"><a href="#panel2">Tab 2</a></li>
<li class="tabs-title"><a href="#panel3">Tab 3</a></li>
</ul>
<div class="tabs-content" data-tabs-content="example-tabs">
<div class="tabs-panel is-active" id="panel1">
<p>This is tab 1 content.</p>
</div>
<div class="tabs-panel" id="panel2">
<p>This is tab 2 content.</p>
</div>
<div class="tabs-panel" id="panel3">
<p>This is tab 3 content.</p>
</div>
</div>Vertical Tabs
Live Preview: Vertical Tabs
Vertical tab 1 content.
Vertical tab 2 content.
Vertical tab 3 content.
Foundation Code:
<div class="grid-x grid-margin-x">
<div class="cell medium-3">
<ul class="vertical tabs" data-tabs id="vertical-tabs">
<li class="tabs-title is-active"><a href="#vpanel1">Tab 1</a></li>
<li class="tabs-title"><a href="#vpanel2">Tab 2</a></li>
<li class="tabs-title"><a href="#vpanel3">Tab 3</a></li>
</ul>
</div>
<div class="cell medium-9">
<div class="tabs-content" data-tabs-content="vertical-tabs">
<div class="tabs-panel is-active" id="vpanel1">
<p>Vertical tab 1 content.</p>
</div>
<div class="tabs-panel" id="vpanel2">
<p>Vertical tab 2 content.</p>
</div>
</div>
</div>
</div>Tabs with Icons
Live Preview: Tabs with Icons
Home tab content.
Profile tab content.
Settings tab content.
Foundation Code:
<ul class="tabs" data-tabs id="icon-tabs">
<li class="tabs-title is-active">
<a href="#ipanel1">
<i class="fi-home"></i> Home
</a>
</li>
<li class="tabs-title">
<a href="#ipanel2">
<i class="fi-torso"></i> Profile
</a>
</li>
</ul>Responsive Tabs
Live Preview: Responsive Tabs
Responsive tab content that adapts to screen size.
Another responsive tab content.
Foundation Code:
<ul class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs" id="responsive-tabs">
<li class="tabs-title is-active"><a href="#rpanel1">Responsive Tab 1</a></li>
<li class="tabs-title"><a href="#rpanel2">Responsive Tab 2</a></li>
</ul>
<div class="tabs-content" data-tabs-content="responsive-tabs">
<div class="tabs-panel is-active" id="rpanel1">
<p>Responsive tab content that adapts to screen size.</p>
</div>
</div>Tabs Data Attributes
| Attribute | Description | Values |
|---|---|---|
data-tabs | Initializes tabs component | - |
data-tabs-content | Links content to tabs | tabs ID |
data-responsive-accordion-tabs | Makes tabs responsive | breakpoint-accordion |
data-deep-link | Enables deep linking | true/false |
data-deep-link-smudge | Enables deep link smudging | true/false |
Up next: Foundation Modal
