Tabs | siimple css

Tabs

A horizontal navigation component

Tabs are a great way to separate the info contained in your content section. To create them, first you have to create the tabs container. Just put a div with the class siimple-tabs to get started. Then, add a tab: they're just divs where you use the class siimple-tabs-item:

Tab 1

Tab 2

Tab 3

<div class="siimple-tabs">
    <div class="siimple-tabs-item">Tab 1</div>
    <div class="siimple-tabs-item">Tab 2</div>
    <div class="siimple-tabs-item">Tab 3</div>
</div>

The siimple-tabs-tab class introduced in v3.0.0 is still supported, but will be removed in a future major release. Use siimple-tabs-item instead.

Selected tab

Add siimple-tabs-item--selected to the tab you want to be selected (for example, the current one that the user will be at).

Tab 1

Tab 2

Tab 3

<div class="siimple-tabs siimple-tabs--boxed">
    <div class="siimple-tabs-item">Tab 1</div>
    <div class="siimple-tabs-item siimple-tabs-item--selected">Tab 2</div>
    <div class="siimple-tabs-item">Tab 3</div>
</div>

Boxed tabs

Add siimple-tabs--boxed to have rounded corners when hovering over the tabs items:

Tab 1

Tab 2

Tab 3

<div class="siimple-tabs siimple-tabs--boxed">
    <div class="siimple-tabs-item">Tab 1</div>
    <div class="siimple-tabs-item">Tab 2</div>
    <div class="siimple-tabs-item">Tab 3</div>
</div>

Found a mistake or want to help improve this documentation? Suggest changes.