A popular form of navigation is tabbed navigation. This is generally a group of links that give the impression of being sub-navigation built within the page. When clicked on, each tab contains a section of content associated with the tabs title. You can use text, images and/or other shortcodes.

Some shortcode might not work in tabs.


This is the content of tab 1

This is the content of tab 2

How It’s Done

Basic usage below, for more advanced features, please refer to

 [tab title="tab1"]
    tab 1 content
 [tab title="tab2"]
    tab 2 content

Here are the some attributes that the shortcode also excepts

[tabs collapsible="true" selected="0" event="click" position="top" ]
 [tab title="title1"]
  tab content 
 [tab title="title2"] 
  another content tab 

  • collapsible = true or false - weather the tabs should be allowed to be collapsed - this doesn't work with twitter bootstrap
  • selected = integer for example - what tab should be selected. 0 means the first tab. 1 means the second tab etc.
  • event = 'click' or 'mouseover' - does do you user need to click on the tab or just mouse over to get to the content. Tip: Don't use mouseover if you are concerned with mobile.
  • position = 'top' , 'bottom' , 'left', 'right' on what side do you want the tabs to appear. See screenshots for an example.
  • vertical_tabs = true or false - depreciated is the same as position = left