« Back

Foundation Tabs Testing


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 object containing the tabs themselves, and a ul object containing the tab content.


  • This is simple tab 1's content. Pretty neat, huh?
  • This is simple tab 2's content. Now you see it!
  • This is simple tab 3's content. It's only okay.


Absolutely Linked Tabs

Tabs can be linked to a path and used as navigation.




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.




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.


  • This is simple tab 1's content. Pretty neat, huh?
  • This is simple tab 2's content. Now you see it!
  • This is simple tab 3's content. It's only okay.


Pill-Style Tabs

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


Vertical Tabs

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

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.