Tabs
Tabs shortcode arguments
| Classes |
| ||||||||
tab_classes | Classes for all child items. |
Tab shortcode arguments
| Classes |
| ||||
title | Tab title. | ||||
icon | Icon (classes) to use in the title. | ||||
label | Text for a label to use in the title. | ||||
label_classes | Classes for a label to use in the title. |
Basic tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs>
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Basic pointing tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs pointing>
<tab title="Tab 1 title">Tab 1 content</tab>
<tab active title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Notes
Adding an .active class can make another tab active by default on page load.Attached tabs
Tab 1 content
Tab 2 content
<tabs top attached tab_classes="bottom attached">
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab disabled title="Tab 3 title">Tab 3 content</tab>
</tabs>Notes
Adding a .disabled class can disable a tab item.Attached pointing tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs top attached pointing tab_classes="bottom attached">
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Tabular attached tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs top attached tabular tab_classes="bottom attached">
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Secondary tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs secondary>
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Secondary basic tabs with basic content
Tab 1 content
Tab 2 content
Tab 3 content
<tabs secondary tab_classes="basic paddingless">
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Secondary pointing tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs secondary pointing>
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Secondary pointing basic tabs with basic content
Tab 1 content
Tab 2 content
Tab 3 content
<tabs secondary pointing tab_classes="basic paddingless">
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Tabular right aligned tabs
Tab 1 content
Tab 2 content
Tab 3 content
Tab 4 content
<tabs top attached tabular tab_classes="bottom attached">
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab right title="Tab 3 title">Tab 3 content</tab>
<tab right title="Tab 4 title">Tab 4 content</tab>
</tabs>Notes
Adding the .right class to the tab makes it's item float right.Compact tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs compact>
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Notes
Adding the .compact class prevents the menu from extending to full width.Compact center aligned tabs
Tab 1 content
Tab 2 content
Tab 3 content
<tabs compact center aligned>
<tab title="Tab 1 title">Tab 1 content</tab>
<tab title="Tab 2 title">Tab 2 content</tab>
<tab title="Tab 3 title">Tab 3 content</tab>
</tabs>Notes
Compact menu can be center aligned.Portfolio example
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Projects 2016
Projects 2015
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Lorem ipsum
Dolor sit amet 332.
Project 2014
Lorem ipsum
Dolor sit amet 332.
Eu nec esse splendide
7+ mel meis tollit
Vero virtute ius ad, ut vel percipit inimicus expetendis. Eu nec esse splendide suscipiantur. At omnis nusquam nam. Oblique fuisset postulant ut has. Mea ut purto affert.
Projects 2013
<tabs huge horizontal bulleted center aligned link list tab_classes="basic paddingless">
<tab title="2011">
<grid four column stackable>
<column>
<dimmer image="//placehold.co/300x240">
<header inverted>Job name</header>
<button inverted link="#">Read more</button>
</dimmer>
</column>
<column>
<dimmer image="//placehold.co/300x240">
<header inverted>Job name</header>
<button inverted link="#">Read more</button>
</dimmer>
</column>
<column>
<dimmer image="//placehold.co/300x240">
<header inverted>Job name</header>
<button inverted link="#">Read more</button>
</dimmer>
</column>
<column>
<dimmer image="//placehold.co/300x240">
<header inverted>Job name</header>
<button inverted link="#">Read more</button>
</dimmer>
</column>
</grid>
</tab>
<tab title="2012">
...
</tab>
<tab title="2013">
...
</tab>
<tab title="2014">
<page title="Portfolio" wpautop="false">
</tab>
<tab title="2015">
...
</tab>
<tab title="2016">
...
</tab>
<tab title="2017">
...
</tab>
</tabs>Notes
Tabs can contain other shortcodes.Tabs with icons
Tab 1 content
Tab 2 content
Tab 3 content
<tabs>
<tab title="Tab 1 title" icon="home">Tab 1 content</tab>
<tab title="Tab 2 title" icon="red fire">Tab 2 content</tab>
<tab title="Tab 3 title" icon="mail">Tab 3 content</tab>
</tabs>Tabs with labels
Tab 1 content
Tab 2 content
Tab 3 content
<tabs>
<tab title="Tab 1 title" label="12">Tab 1 content</tab>
<tab title="Tab 2 title" label="Blue" label_classes="blue">Tab 2 content</tab>
<tab title="Tab 3 title" label="23" label_classes="circular teal">Tab 3 content</tab>
</tabs>