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

First panel content goes here. 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.

Second panel content goes here. 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.

Third panel content goes here. 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.

Fourth panel content goes here. 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

<ul class="tabs" data-tab> <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li> <li class="tab-title"><a href="#panel2-2">Tab 2</a></li> <li class="tab-title"><a href="#panel2-3">Tab 3</a></li> <li class="tab-title"><a href="#panel2-4">Tab 4</a></li> </ul> <div class="tabs-content"> <div class="content active" id="panel2-1"> <p>First panel content goes here...</p> </div> <div class="content" id="panel2-2"> <p>Second panel content goes here...</p> </div> <div class="content" id="panel2-3"> <p>Third panel content goes here...</p> </div> <div class="content" id="panel2-4"> <p>Fourth panel content goes here...</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?

This is the second panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, deleniti nam eaque sunt excepturi rerum hic labore tempora! Nihil, dolorem blanditiis ipsa veritatis minima dolores consequuntur deserunt sed culpa modi!

This is the third panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, in, sunt, dolorem corrupti officia earum veritatis numquam provident exercitationem non impedit laborum dolor at repellat deleniti. Vero nobis quas tempore.

This is the fourth panel of the basic tab example. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, veritatis, a, nisi, repellat fugit animi consectetur voluptas eligendi et iure voluptatibus neque ullam asperiores quae laboriosam praesentium suscipit amet deserunt.


Vertical Tabs

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

HTML

<ul class="tabs vertical" data-tab> <li class="tab-title active"><a href="#panel1a">Tab 1</a></li> <li class="tab-title"><a href="#panel2a">Tab 2</a></li> <li class="tab-title"><a href="#panel3a">Tab 3</a></li> <li class="tab-title"><a href="#panel4a">Tab 4</a></li> </ul> <div class="tabs-content vertical"> <div class="content active" id="panel1a"> <p>Panel 1 content goes here.</p> </div> <div class="content" id="panel2a"> <p>Panel 2 content goes here.</p> </div> <div class="content" id="panel3a"> <p>Panel 3 content goes here.</p> </div> <div class="content" id="panel4a"> <p>Panel 4 content goes here.</p> </div> </div>

Rendered HTML

Panel 1 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, culpa, eos, laboriosam delectus sequi asperiores labore fuga ex molestias a assumenda nesciunt libero consequatur nulla deserunt eveniet ea nobis magni!

Panel 2 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, quos ullam soluta pariatur optio magni repudiandae obcaecati quidem consequuntur possimus quam dicta culpa quia aut odit placeat ut amet nesciunt.

Panel 3 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam, possimus, ipsa, aperiam placeat quod doloribus corporis necessitatibus enim sapiente iusto nulla asperiores repudiandae adipisci ea consequuntur dolorem similique recusandae quia.

Panel 4 content goes here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, quo voluptas ratione assumenda beatae tenetur tempora accusamus quisquam rem ad deserunt magni asperiores voluptatibus aperiam neque iste sit recusandae aspernatur!


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.

Tab 1
Tab 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>

Customize with Sass

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

SCSS

$tabs-navigation-padding: rem-calc(16); $tabs-navigation-bg-color: #efefef; $tabs-navigation-hover-bg-color: darken($tabs-navigation-bg-color, 5%); $tabs-navigation-active-bg-color: #fff; $tabs-navigation-font-color: #222; $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 »