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. If you simply want visual tabs (as seen in this documentation) without the on-page hookup, you only need the DL. 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 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.

Even Tab 1
Even Tab 2
Even Tab 3
Tab 4
Tab 5
Tab 6
Tab 7
Tab 8

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.

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.

Get Yii Foundation

Download Yii Foundation here to get started quickly. Includes everything you need to get your proyects up and running, take a look at the Setup Guide.

Download Yii Foundation

Yii Foundation 2

Looking for Yii Foundation 2 Documentation?

Yii Foundation 2 Documentation