Tutorialsplane

UIkit Tab


UIkit tab– This component allows us to create the tabs in UIkit framework. This component contains tabs aligned in single row that are clickable. Here in this article, we are going to explain how to create tabs in UIkit framework. You can also our online editor to edit and run the code online.


UIkit Tab Component Syntax & Example

Let us first create simple UIkit Tab-

Example:

  • Tab 1
  • Tab 2
  • Tab 3

Try it »

If you run the above example it will produce output something like this-

Following classes and attribute are used to create tabs in UIkit.

Class/Attribute Description
uk-tab Add attribute uk-tab to <ul> and then add <a> elements as tab items within the list.
.uk-active This represents active state.
.uk-disabled This represents disabled state.

Bottom Modifier

Class uk-tab-bottom is used to add the tab bottom



Example:

  • Tab 1
  • Tab 2
  • Tab 3

Try it »

If you run the above example it will produce output like this-

Left | Right Modifiers

You can use class uk-tab-left and uk-tab-left to create vertical tabs. Class uk-tab-left is used to place the divider to left and uk-tab-right is used to place the divider right of tabs.

Example:

  • Tab 1
  • Tab 2
  • Tab 3
  • Tab 1
  • Tab 2
  • Tab 3

Try it »

If you run the above example it will produce output something like this-

Uikit Tutorial

Component