Tabs

Tabs 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.


Horizontal Tabs

This is the first panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?

Vertical Tabs

Tab 1
Tab 2
Tab 3
Tab 4

Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Panel 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.


Basic

You can create a group of horizontal tabs using minimal markup.

HTML

<dl class="tabs" data-tab> <dd class="active"><a href="#panel1">Tab 1</a></dd> <dd><a href="#panel2">Tab 2</a></dd> <dd><a href="#panel3">Tab 3</a></dd> <dd><a href="#panel4">Tab 4</a></dd> </dl> <div class="tabs-content"> <div class="content active" id="panel1"> <p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p> </div> <div class="content" id="panel2"> <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p> </div> <div class="content" id="panel3"> <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p> </div> <div class="content" id="panel4"> <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p> </div> </div>

Rendered HTML

Tab 1
Tab 2
Tab 3
Tab 4

This is the first panel of the basic tab example. This is the first panel of the basic tab example.

This is the second panel of the basic tab example. This is the second panel of the basic tab example.

This is the third panel of the basic tab example. This is the third panel of the basic tab example.

This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.


Vertical Tabs

You can create a group of vertical tabs using minimal markup. Just adding the class vertical changes the orientation of horizontal tabs.

HTML

<dl class="tabs vertical" data-tab> <dd class="active"><a href="#panel1">Tab 1</a></dd> <dd><a href="#panel2">Tab 2</a></dd> <dd><a href="#panel3">Tab 3</a></dd> <dd><a href="#panel4">Tab 4</a></dd> </dl> <div class="tabs-content vertical"> <div class="content active" id="panel1"> <p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p> </div> <div class="content" id="panel2"> <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p> </div> <div class="content" id="panel3"> <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p> </div> <div class="content" id="panel4"> <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p> </div> </div>

Rendered HTML

This is the first panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam, pariatur accusantium magni cumque vel voluptates illum repellendus sed dignissimos magnam! Deleniti, fugit tempore quibusdam molestias iusto asperiores incidunt sint nemo?


Deep linking to tabs or tab contents

The tabs Foundation component can parse the location hash value and open the corresponding tab content pane. To enable deep linking set data-options="deep_linking:true". If the location hash maps to an element ID within a tab content pane, then the appropriate tab will become active and the browser window will scroll to the specified element. If you do not want to scroll to the specified element then set data-options="scroll_to_content: false".

In the following example, deep linking is enabled. If the location hash is #tabs-deeplink-2 then the second tab will become active. If the location hash is #tabs-deeplink-content-2 then the second tab will become active, and the browser will scroll to the paragraph tag with ID, tabs-deeplink-content-2.


Callbacks

There are two ways to bind to callbacks in your tabs.

Callback function

<script> $(document).foundation({ tab: { callback : function (tab) { console.log(tab); } } }); </script>

Toggled Event

<script> $('#myTabs').on('toggled', function (event, tab) { console.log(tab); }); </script>

Accessibility

You can make tabs more accessible by using the code snippet below. The tabs are keyboard accessible meaning that a user can use the tab key or arrow keys to navigate through them. The role of tablist tells a screen reader what the element is and reads the necessary content.

HTML

<ul class="tabs" data-tab role="tablist"> <li class="tab-title active" role="presentational" ><a href="#panel2-1" role="tab" tabindex="0" aria-selected="true" controls="panel2-1">Tab 1</a></li> <li class="tab-title" role="presentational" ><a href="#panel2-2" role="tab" tabindex="0"aria-selected="false" controls="panel2-2">Tab 2</a></li> <li class="tab-title" role="presentational"><a href="#panel2-3" role="tab" tabindex="0" aria-selected="false" controls="panel2-3">Tab 3</a></li> <li class="tab-title" role="presentational" ><a href="#panel2-4" role="tab" tabindex="0" aria-selected="false" controls="panel2-4">Tab 4</a></li> </ul> <div class="tabs-content"> <section role="tabpanel" aria-hidden="false" class="content active" id="panel2-1"> <h2>First panel content goes here...</h2> </section> <section role="tabpanel" aria-hidden="true" class="content" id="panel2-2"> <h2>Second panel content goes here...</h2> </section> <section role="tabpanel" aria-hidden="true" class="content" id="panel2-3"> <h2>Third panel content goes here...</h2> </section> <section role="tabpanel" aria-hidden="true" class="content" id="panel2-4"> <h2>Fourth panel content goes here...</h2> </section> </div>

Rendered HTML

First panel content goes here...


Adding New Tab Content After Page Load

If you add new content after the page has been loaded, you will need to reinitialize the Foundation JavaScript by running the following:

$(document).foundation();

Reflow will make Foundation check the DOM for any elements and re-apply any listeners to them.

$(document).foundation('tab', 'reflow');

Customize with Sass

Tabs can be easily customized with the Sass variables provided in the _settings.scss file.

SCSS

$include-html-tabs-classes: $include-html-classes; $tabs-navigation-padding: rem-calc(16); $tabs-navigation-bg-color: $silver; $tabs-navigation-active-bg-color: $white; $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); $tabs-navigation-font-color: $jet; $tabs-navigation-active-font-color: $tabs-navigation-font-color; $tabs-navigation-font-size: rem-calc(16); $tabs-navigation-font-family: $body-font-family; $tabs-content-margin-bottom: rem-calc(24); $tabs-content-padding: $column-gutter/2; $tabs-vertical-navigation-margin-bottom: 1.25rem;

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/tabs";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »