Foundation

Tabs

Tabs are very versatile both as organization and navigational constructs. With the base Foundation package, tabs in the markup specified below are already hooked up — no extra work required.

Simple Tabs

Tabs are made of two objects: a dl/ul object containing the tabs themselves, and a ul object containing the tab content. If you simply want visual tabs (as seen in this documentation) without the on-page hookup, you only need the DL/LI. If you want functional tabs, just be sure that each tab is linked to an ID, and that the corresponding tab has an ID of #tabnameTab. Check out these examples.

Note: The third tab is using the mobile visibility classes to hide on small devices.

  • Simple Tab 1
    Simple Tab 2
    Simple Tab 3
    • This is simple tab 1s content. Pretty neat, huh?
    • This is simple tab 2s content. Now you see it!
    • This is simple tab 3s content.
  • 
    <dl class="tabs">
      <dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
      <dd><a href="#simple2">Simple Tab 2</a></dd>
      <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
    </dl>
    <ul class="tabs-content">
      <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
      <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
      <li id="simple3Tab">This is simple tab 3s content.</li>
    </ul>
    

Tab Sizing

If you want your tabs to run the full width of their container evenly, you can add class of .two-up, .three-up, .four-up, and .five-up to them.

  • Even Tab 1
    Even Tab 2
    Even Tab 3
    Tab 4
    Tab 5
    Tab 6
    Tab 7
    Tab 8
  • 
    <dl class="tabs three-up">
      <dd class="active"><a href="#evenTab1">Even Tab 1</a></dd>
      <dd><a href="#evenTab2">Even Tab 2</a></dd>
      <dd><a href="#evenTab3">Even Tab 3</a></dd>
    </dl>
    
    <dl class="tabs five-up">
      <dd class="active"><a href="#evenTab4">Tab 4</a></dd>
      <dd><a href="#evenTab5">Tab 5</a></dd>
      <dd><a href="#evenTab6">Tab 6</a></dd>
      <dd><a href="#evenTab7">Tab 7</a></dd>
      <dd><a href="#evenTab8">Tab 8</a></dd>
    </dl>
    

Contained Tabs

Contained tabs have a simple added class of "contained" on the tabs-content element. What that means is the tab content has a border around it tying it to the tabs. You can still use standard column sizes inside a tab element.

You'll also notice in this example that a dt element can serve to label groups of tabs. You can alternatively use an li.section-title to do the same thing.

  • Title 1
    Simple Tab 1
    Simple Tab 2
    Title 1
    Simple Tab 3
    • This is simple tab 1s content. Pretty neat, huh?
    • This is simple tab 2s content. Now you see it!
    • This is simple tab 3s content.
  • 
    <dl class="tabs contained">
      <dt>Title 1</dt>
      <dd class="active"><a href="#simpleContained1">Simple Tab 1</a></dd>
      <dd class="hide-for-small"><a href="#simpleContained2">Simple Tab 2</a></dd>
      <dt class="hide-for-small">Title 1</dt>
      <dd class="hide-for-small"><a href="#simpleContained3">Simple Tab 3</a></dd>
    </dl>
    <ul class="tabs-content contained">
      <li class="active" id="simpleContained1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
      <li id="simpleContained2Tab">This is simple tab 2s content. Now you see it!</li>
      <li id="simpleContained3Tab">This is simple tab 3s content.</li>
    </ul>
    

Pill-Style Tabs

If you need an alternate view for tabs (especially for filters, or similar), you can use pill-style tabs.

  • Pill Tab 1
    Pill Tab 2
    Pill Tab 3
  • 
    <dl class="tabs pill">
      <dd class="active"><a href="#pillTab1">Pill Tab 1</a></dd>
      <dd><a href="#pillTab2">Pill Tab 2</a></dd>
      <dd class="hide-for-small"><a href="#pillTab3">Pill Tab 3</a></dd>
    </dl>
    

Vertical Tabs

You can also use tabs in a vertical configuration by adding a class of 'vertical' to the dl/ul element. These are great for more scalable nav, and you can see how they work on this page on a tablet or desktop.

  • Vertical Tab 1
    Vertical Tab 2
    Vertical Tab 3
  • 
    <dl class="vertical tabs">
      <dd class="active"><a href="#vertical1">Vertical Tab 1</a></dd>
      <dd><a href="#vertical2">Vertical Tab 2</a></dd>
      <dd><a href="#vertical3">Vertical Tab 3</a></dd>
    </dl>
    
Mobile Tabs

If you want a standard, horizontal tab group to act vertical on small devices, adding a class of "mobile" to a standard (not vertical) tab group will switch them to full width nav bars on small screens.


What's the missing element?

There are tons of common UI elements used across the web each day. We've got a lot of really good pieces for you to use and we're always looking to add more!
Learn about our UI Elements »

Grab the copy of Foundation best for you, whether that's Scss or CSS, everything or just bits and pieces.

Install Foundation

Awesome product jobs:
via ZURBjobs