Build amazing sites with this great collection of components Buy Now

Tabs

Tabs are great

Tabs are great for content discovery by the user or visitor. Instead of overwhelming them, they can 'tab through' the content to find what they are looking for.

Each tab is a link element that refers to (links to) the ID of the corresponding content panel.

Default Tabs

When you click on each tab, only the container with the corresponding tab id will become visible. You can add the class .disabled to make a tab inaccessible.

Tab 1 content
Tab 2 content
Tab 3 content

Full-width Tabs

Sometimes you really want to fill the space on the tab bar.

Tab 1 content
Tab 2 content
Tab 3 content

Vertical Tabs

Because sometims that is a better layout.

Tab 1 content
Tab 2 content
Tab 3 content

Horizontal to Vertical Tabs

These tabs are placed above the content panels on small screen and next to them on wide screens.

Tab 1 content
Tab 2 content
Tab 3 content

Horizontal to Vertical Icon Tabs

The same as above but with a sweet design and elevation effect added.

Tab 1 content
Tab 2 content
Tab 3 content

Swipeable Content

These should be swipeable...

Tab 1 content
Tab 2 content
Tab 3 content
There is some copyright thingy going here too. Feel free to do whatever you want with it after purchase [except resell without significant modification].