Coming Soon

We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.

Just a demo

The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.

Tab

Create a tabbed navigation with different styles.

Usage

Note If you are not using Tailwind CSS, you can skip this step. On your tailwind.config.js file, add the Tab component within the ui() plugin.

import ui from "franken-ui";
 
ui({
    components: {
        tab: {
            hooks: {}
        }
    }
}),

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.

Class/AttributeDescription
.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 class="px-4 pb-3 pt-2" href=""></a></li>
  <li><a class="px-4 pb-3 pt-2" href=""></a></li>
  <li class="uk-disabled"><a class="px-4 pb-3 pt-2">Disabled</a></li>
</ul>
Copy to clipboard
  • <ul class="uk-tab" uk-tab>
  <li class="uk-active"><a href="#">Left</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
  <li class="uk-disabled"><a>Disabled</a></li>
</ul>

Alternative layout

Use the .uk-tab-alt class for the alternative layout.

Copy to clipboard
  • <ul class="uk-tab-alt">
  <li class="uk-active"><a href="#">Account</a></li>
  <li><a href="#">Password</a></li>
</ul>

Bottom modifier

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

<ul class="uk-tab-bottom" uk-tab>
  ...
</ul>
Copy to clipboard
  • <ul class="uk-tab-bottom" uk-tab>
  <li class="uk-active"><a href="#">Left</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</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>
Copy to clipboard
  • <div class="grid grid-cols-2 gap-3">
  <div>
    <ul class="uk-tab uk-tab-left flex-col">
      <li class="uk-active"><a class="py-2" href="#">Left</a></li>
      <li><a class="py-2" href="#">Item</a></li>
      <li><a class="py-2" href="#">Item</a></li>
    </ul>
  </div>
 
  <div>
    <ul class="uk-tab uk-tab-right">
      <li class="uk-active"><a class="px-4 py-2" href="#">Right</a></li>
      <li><a class="px-4 py-2" href="#">Item</a></li>
      <li><a class="px-4 py-2" href="#">Item</a></li>
    </ul>
  </div>
</div>

Responsive

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>

Alignment

You can combine tabs with the Flex component, Width component or utility classes from Tailwind CSS to modify the alignment of the navigations.

<ul class="uk-flex-right" uk-tab>
  ...
</ul>
Copy to clipboard
  • <div>
  <ul class="uk-tab" uk-tab>
    <li class="uk-active"><a href="#">Center</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>
 
<div class="uk-margin">
  <ul class="justify-center" uk-tab>
    <li class="uk-active"><a href="#">Center</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>
 
<div class="uk-margin">
  <ul class="justify-end" uk-tab>
    <li class="uk-active"><a href="#">Right</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>
 
<div class="uk-margin">
  <ul class="justify-between" uk-tab>
    <li class="uk-active"><a href="#">Justify</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
    <li><a href="#">Item</a></li>
  </ul>
</div>

Tabs and Dropdown

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

<ul uk-tab>
  <li>
    <!-- This is the menu item toggling the dropdown -->
    <a class="px-4 pb-3 pt-2" href=""></a>
 
    <!-- This is the dropdown -->
    <div uk-dropdown="mode: click">
      <ul class="uk-dropdown-nav uk-nav">
        ...
      </ul>
    </div>
  </li>
</ul>
Copy to clipboard
  • <ul class="uk-tab" uk-tab>
  <li class="uk-active"><a href="#">Active</a></li>
  <li><a href="#">Item</a></li>
  <li>
    <a href>More <span uk-icon="icon: triangle-down"></span></a>
    <div uk-dropdown="mode: click">
      <ul class="uk-dropdown-nav uk-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
      </ul>
    </div>
  </li>
</ul>

Available hooks

Learn more about using hooks.

Hook NameAffected Classes
hook-tab.uk-tab
hook-tab-before.uk-tab::before
hook-item.uk-tab > * > a
hook-item-hover.uk-tab > * > a:hover
hook-item-active.uk-tab > .uk-active > a
hook-item-disabled.uk-tab > .uk-disabled > a
hook-bottom.uk-tab-bottom
hook-bottom-before.uk-tab-bottom::before
hook-bottom-item.uk-tab-bottom > * > a
hook-left.uk-tab-left
hook-left-before.uk-tab-left::before
hook-right.uk-tab-right
hook-right-before.uk-tab-right::before
hook-left-item.uk-tab-left > * > a
hook-right-item.uk-tab-right > * > a
hook-misc*

Component options

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

OptionValueDefaultDescription
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)).

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.tab(element, options);

Events

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

NameDescription
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.

Methods

The following methods are available for the component:

Show

UIkit.tab(element).show(index);

Shows the Tab item with given index.

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

Accessibility

The Tab component adheres to the Tab WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.

  • The tab navigation has the tablist role, and if it is a Nav component, the aria-orientation state set to vertical.
  • The tab navigation items have the presentation role.
  • The tab navigation links have an ID, the tab role, the aria-selected state and the aria-controls property set to the ID of the respective content item.
  • The content list has the presentation role.
  • The content list items have the ID, the tabpanel role and the aria-labelledby property set to the ID of the respective tab.

Keyboard interaction

The tab navigation can be accessed through keyboard using the following keys.

  • The tab or shift+tab keys place focus on the active tab in the tab navigation. If the focus already is on the active tab, the focus will move to the next element outside the tab navigation.
  • The left/right arrow or up/down arrow keys, depending on the orientation, navigate through the tabs. If the focus is on the last tab, it moves to the first tab.
  • The enter or space keys activate the corresponding content item of the focused tab.
  • The home or end keys move the focus to the first or last tab.

By default, the Switcher component has the manual activation behavior. This means the corresponding content items will only be activated using the enter or spacekeys. To switch to automatic activation, set follow-focus to true. When navigating through tab items, the corresponding content item will get active automatically.