siimple 3.2.0 siimple.xyz
Components
Reusable advanced elements, including alerts, lists and more!
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.