Elements

Tabs

To create a set of tabs, use the uk-tab class. Uikit tabs fit nicely in responsive layouts by converting the tabs into a dropdown menu. The tabs also scale to fit its contents by adjusting the tab height automatically.

Horizontal tabs

• Tab 1
• Tab 2
• Tab 3

• This is the first tab

  Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

• This is the second tab

  Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

• This is the third tab

  Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment. Never be bullied into silence. Never allow yourself to be made a victim. Accept no one's definition of your life; define yourself.

<ul class="uk-tab uk-tab-grid uk-tab-top" data-uk-tab="{connect:'#tabs_example1', animation: 'fade'}">
    <li class="uk-active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
  </ul>

  <ul id="tabs_example1" class="uk-switcher uk-margin uk-tab-content">
    <li>Your content goes here</li>
    <li>Your content goes here</li>
    <li>Your content goes here</li>
  </ul>

Vertical tabs

Vertical tabs use a combination of uk-grid, uk-width-* and uk-tab classes. The uk-grid class is used to define the tab container; the uk-width-* class is used to define the widths of the tabs and content; the uk-tab class creates the tab elements.

<div class="uk-grid">
    <div class="uk-width-medium-2-10">
      <ul class="uk-tab uk-tab-left" data-uk-tab="{connect:'#tabs_example2', animation: 'fade'}">
        <li class="uk-active"><a href="#">Tab 1</a></li>
        <li><a href="#">Tab 2</a></li>
        <li><a href="#">Tab 3</a></li>
      </ul>
    </div>

    <div class="uk-width-medium-8-10">
      <ul id="tabs_example2" class="uk-switcher uk-margin uk-tab-content">
        <li>your content goes here</li>
        <li>your content goes here</li>
        <li>your content goes here</li>
      </ul>
    </div>
  </div>