Create a tabbed navigation with different styles.


Create a tabbed navigation with different styles.


The tab component consists of clickable tabs, that are aligned side by side in a list. Its JavaScript functionality extends the Switcher component and is necessary to dynamically transition through different contents using the tabbed navigation.

uk-tabAdd this attribute to a <ul> element to define the Tab component. Use <a> elements as tab items within the list.
.uk-active Add this class to a list item to apply an active state.
.uk-disabled Add this class to a list item to apply a disabled state. Also remove the href attribute from the anchor to make it inaccessible through keyboard navigation.
<ul uk-tab>
    <li class="uk-active"><a href=""></a></li>
    <li><a href=""></a></li>
    <li class="uk-disabled"><a></a></li>

Bottom modifier

Add the .uk-tab-bottom class to flip tab items to the bottom.

<ul class="uk-tab-bottom" uk-tab></ul>

Left/Right modifiers

Add the .uk-tab-left or .uk-tab-right class to align tabs vertically to the left or right side. To save space, the alignment automatically switches back to horizontal when the viewport width goes below 960px.

When using the vertical alignment, you will usually create a grid to apply the layout as seen in the Switcher example.

<ul class="uk-tab-left" uk-tab></ul>

<ul class="uk-tab-right" uk-tab></ul>


To change the default breakpoint between the vertical and horizontal alignment, just apply the media option to the attribute with the appropriate viewport width. Add a number in pixel, for example media: 640, or a breakpoint, for example media: @m.

<ul class="uk-tab-left" uk-tab="media: @s"></ul>


You can combine tabs with the Flex component or the Width component to modify the alignment of the navigations.

<ul class="uk-flex-right" uk-tab></ul>

Tabs and Dropdown

Tabs can be used to trigger a dropdown menu from the Dropdown component.

<ul uk-tab>

        <!-- This is the menu item toggling the dropdown -->
        <a href=""></a>

        <!-- This is the dropdown -->
        <div uk-dropdown="mode: click">
            <ul class="uk-nav uk-dropdown-nav"></ul>


Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

connectCSS selectorfalseRelated item’s container. By default, this is the next element with the ‘uk-switcher’ class.
toggle CSS selector> *The toggle selector, which triggers content switching on click.
active Number0Active index on init. Providing a negative number indicates a position starting from the end of the set.
animationStringfalseSpace-separated names of animations. Comma-separated for animation out.
durationNumber200The animation duration.
swipingBooleantrueUse swiping.
mediaNumber, String960When to switch to horizontal mode - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).


Learn more about JavaScript components.

Initialization, options);


The following events will be triggered on the connected items of the elements with this component attached:

beforeshowFires before an item is shown. Can prevent showing by calling preventDefault() on the event.
showFires after an item is shown.
shownFires after the item’s show animation has completed.
beforehideFires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hideFires after an item’s hide animation has started.
hiddenFires after an item is hidden.


The following methods are available for the component:


Shows the Tab item with given index.

indexString, Number, Node0Tab item to show. 0 based index.