\n

Create a tabbed navigation with different styles.

\n\n

Usage

\n\n

The Tab component consists of clickable tabs, that are aligned side by side.

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassDescription
.uk-tabAdd this class to a <ul> element to define the Tab component. Use <a> elements as tab items within the list.
.uk-activeAdd this class to a list item to apply an active state.
.uk-disabledAdd this class to a list item to apply a disabled state.
\n
\n\n

The data-uk-tab attribute is required for two purposes. Firstly, it enables the responsive behaviour. If the parent container is too small to accomodate all tabs, they will be combined into a dropdown, toggled by a single tab, which represents the active tab item. This also requires the Dropdown component in order to work.

\n

And secondly, its functionality is coupled to the Switcher component, which is necessary to dynamically transition through different contents using tabbed navigation.

\n\n

Example

\n\n \n\n

Markup

\n\n
<ul class="uk-tab" data-uk-tab>\n    <li class="uk-active"><a href="">...</a></li>\n    <li><a href="">...</a></li>\n    <li><a href="">...</a></li>\n    <li class="uk-disabled"><a href="">...</a></li>\n</ul>
\n\n
\n\n

Horizontal modifiers

\n\n

Add one of the following classes to alter your tabs’ styling. These modifiers can also be combined.

\n\n

Align tabs

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
ClassDescription
.uk-tab-flipAdd this class to align tabs right and in reversed order.
.uk-tab-bottomAdd this class to the <ul> to place tabs at the bottom. This can also be combined with the other modifiers.
\n
\n\n

Example

\n\n
\n
\n \n
\n
\n \n
\n
\n\n

Markup

\n\n
<ul class="uk-tab uk-tab-flip" data-uk-tab>...</ul>\n<ul class="uk-tab uk-tab-bottom" data-uk-tab>...</ul>
\n\n
\n\n

Justify tabs

\n\n

Add the .uk-tab-grid class and one of the .uk-width-* classes from the Grid component to the list items to arrange tabs in a grid that takes up full width of its parent element.

\n\n

Example

\n\n
\n \n
\n\n

Markup

\n\n
<ul class="uk-tab uk-tab-grid uk-tab-bottom" data-uk-tab>\n    <li class="uk-width-1-3"><a href="">...</a></li>\n</ul>
\n\n
\n\n

Center tabs

\n\n

Add the .uk-tab-center class to a <div> element around the tabbed navigation to center tabs.

\n\n

Example

\n\n
\n
\n \n
\n
\n\n

Markup

\n\n
<div class="uk-tab-center">\n    <ul class="uk-tab" data-uk-tab>...</ul>\n</div>
\n\n
\n\n

Vertical modifiers

\n\n

Add the .uk-tab-left or .uk-tab-right class to align tabs vertically to the left or right side.

\n\n

Example

\n\n
\n
\n\n \n\n
\n
\n\n \n\n
\n
\n\n

Markup

\n\n
\n
\n
<ul class="uk-tab uk-tab-left uk-width-medium-1-2">\n    <li>...</li>\n</ul>
\n
\n
\n
<ul class="uk-tab uk-tab-right uk-width-medium-1-2">\n    <li>...</li>\n</ul>
\n
\n
\n\n

Responsive behavior

\n\n

In narrower viewports, like phones, vertical tabs align themselves horizontally. Adding the data-uk-tab attribute will apply the same responsive behavior as horizontal tabs.

\n\n
\n\n

Tabs with dropdowns

\n\n

This is an example of how to use tabs with the Dropdown component.

\n\n

Example

\n\n \n\n

Markup

\n\n
<ul class="uk-tab">\n    <li><a href="">...</a></li>\n\n    <!-- This is the container enabling the JavaScript -->\n    <li data-uk-dropdown="{mode:'click'}">\n\n        <!-- This is the menu item toggling the dropdown -->\n        <a href="">...</a>\n\n        <!-- This is the dropdown -->\n        <div class="uk-dropdown uk-dropdown-small">\n            <ul class="uk-nav uk-nav-dropdown">\n                <li><a href="">...</a></li>\n            </ul>\n        </div>\n    </li>\n</ul>
\n