This shortcode allows you to divide your content with horizontal or vertical tabs. You can specify which tab will be selected by default and turn any tab into link. You can use any HTML code or even other shortcodes as a content.

Regular tabs

Tab nameTab nameTab name
Tab content
Tab content
Tab content

Vertical tabs

Tab nameTab nameTab name
Tab content
Tab content
Tab content
<strong>Regular tabs</strong>

[su_tabs]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[/su_tabs]

<strong>Vertical tabs</strong>

[su_tabs vertical="yes"]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[su_tab title="Tab name" disabled="no" anchor="" url="" target="blank" class=""]Tab content[/su_tab]
[/su_tabs]

[su_tabs]

Option name Possible values Default value
style
Choose style for this tabs
default (Default)
carbon (Carbon)
sharp (Sharp)
grid (Grid)
wood (Wood)
fabric (Fabric)
modern-dark (Modern: Dark)
modern-light (Modern: Light)
modern-blue (Modern: Blue)
modern-orange (Modern: Orange)
flat-dark (Flat: Dark)
flat-light (Flat: Light)
flat-blue (Flat: Blue)
flat-green (Flat: Green)
default
active
Select which tab is open by default
Number from 1 to 100 1
vertical
Align tabs vertically
yes or no no
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)

none

[su_tab]

Option name Possible values Default value
title
Tab title
Any text value Tab name
disabled
Is this tab disabled
yes or no no
anchor
You can use unique anchor for this tab to access it with hash in page url. For example: use Hello and then navigate to url like http://example.com/page-url#Hello. This tab will be activated and scrolled in
Any text value

none

url
Link tab to any webpage. Use full URL to turn the tab title into link
Any text value

none

target
Choose how to open the custom tab link
self (Open in same tab)
blank (Open in new tab)
blank
class
Additional CSS class name(s) separated by space(s)
CSS class name(s) separated by space(s)

none