Tabs A single content area with multiple panels, each associated with a header in a list.

Basic example

To create a basic tabbed content area you have to use the following HTML structure and initialize the tabs widget using a selector.

tab 1 content
tab 2 content
tab 3 content

Icons

Tabs can have left/right icons with or without text in their navigation anchors.

tab 1 content
tab 2 content
tab 3 content

Multiple colors

You can use the core color helpers to change the icons & texts colors & sizes.

tab 1 content
tab 2 content
tab 3 content
tab 4 content
tab 5 content

Tabs alignment

Tabs navigation anchors can be aligned to the left or right. For example, to align a tab navigation anchor to the right, you must add .float-right to its parent li element.

tab 1 content
tab 2 content
tab 3 content
tab 4 content

Bottom tabs navigation

To create tabs with bottom navigation you must move the navigation ul element below the tabs panels and add the .tabs-bottom class to it.

tab 1 content
tab 2 content
tab 3 content
tab 4 content

Justified block level navigation

You can create justified block level tabs navigation by wrapping the ul navigation element inside a div with class .button-block-justified like we did in the example below.

tab 1 content
tab 2 content
tab 3 content
tab 4 content

Open on mouseover

The jQueryUI Tabs widget also support the option to open tabbed content on mouse over, rather than click.

tab 1 content
tab 2 content
tab 3 content
tab 4 content

Tabs with accordion

The jQueryUI Tabs widget also support the option to open tabbed content on mouse over, rather than click.

tab 1 content

Header 1

Accordion content 1

Header 2

Accordion content 2

Header 3

Accordion content 3

Header 1

Accordion content 1

Header 2

Accordion content 2

Header 3

Accordion content 3
tab 4 content