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.

Simple Tab 1

Simple Tab 2

Simple Tab 3

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.

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.

Title 1: Simple Tab 1; Simple Tab 2
Title 1: Simple Tab 3

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:

Pill Tab 1

Pill Tab 2

Pill Tab 3

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.

Vertical Tab 1

Vertical Tab 2

Vertical Tab 3

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.