Tabby

Simple, mobile-first toggle tabs.

There are three types of tabs: Basic, Horizontal, and Stacked.

Basic Tabs

These use basic, inline hyperlinks. Add the .active class to the tab content you want to display by default.

Horizontal Tabs

Styled navigation that displays horizontally. Add the .active class to the current <li> in the navigation to apply special styling.

• Superheroes
• Ice Cream
• Seasons

Stacked Tabs

On smaller screens, stacked tabs mimic the appearance of horizontal tabs. On bigger screens, navigation appears in a vertical stack next to the content.

This demo uses Origami.css, a fluid, mobile-first grid system, to align the navigation. Feel free to use whatever grid you prefer.