Tabs

What’s this?

You can dynamically switch between content using tabs. It’s a widely used website element so we’ve made sure it has all the variations you might need. Check out these examples.

Small

Tab1
Tab2

This is tab one. Any content you like goes here.

React has unlimited colors

Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Get code

[tabs convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

This is tab one. Any content you like goes here.

React has unlimited colors

Get code

[tabs size="med" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

Large

Tab1
Tab2

This is tab one. Any content you like goes here.

React has unlimited colors

Get code

[tabs size="lrg" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

Add animation

Tab1
Tab2

This is tab one. Any content you like goes here.

React has unlimited colors

Get code

[tabs animation="sliding" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

Fill all space

Tab1
Tab2

This is tab one. Any content you like goes here.

React has unlimited colors

Get code

[tabs size="med" fill="blocks-2" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

Up to 5 tabs

This is tab one. Any content you like goes here.

React has unlimited colors

This is tab THREE. Any content you like goes here.

This is tab FOUR. Any content you like goes here.

This is tab FIVE, you get the idea. You can have a maximum of 6 tabs in this format.

Get code

[tabs size="med" fill="blocks-5" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

Vertical tabs

Tab1
Tab2

This is tab one. Any content you like goes here.

React has unlimited colors

Get code

[tabs layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

Medium

Tab1
Tab2

This is tab one. Any content you like goes here.

React has unlimited colors

Get code

[tabs size="med" layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

Large

Tab1
Tab2

This is tab one. Any content you like goes here.

React has unlimited colors

Get code

[tabs size="lrg" layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

Demos

View all Demos React Hub Copy current page content

[box type="custom-boxed-item" align="center" text_align="textcenter"] [fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header] You can dynamically switch between content using tabs. It's a widely used website element so we've made sure it has all the variations you might need. Check out these examples. [icon icon="fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"] [/box] [section_break type="blank" margin_bottom="30" /] [fancy_header bold="1" type="style1"]Small[/fancy_header] [tabs convert="cvt-phone-ldsp"] [tab title="Tab1"][box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box][/tab] [tab title="Tab2"][h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Medium[/fancy_header] [tabs size="med" convert="cvt-phone-ldsp"] [tab title="Tab1"][box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box][/tab] [tab title="Tab2"][h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs size="med" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Large[/fancy_header] [tabs size="lrg" convert="cvt-phone-ldsp"] [tab title="Tab1"][box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box][/tab] [tab title="Tab2"][h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs size="lrg" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Add animation[/fancy_header] [tabs animation="sliding" convert="cvt-phone-ldsp"] [tab title="Tab1"][box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box][/tab] [tab title="Tab2"][h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs animation="sliding" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Fill all space[/fancy_header] [tabs size="med" fill="blocks-2" convert="cvt-phone-ldsp"] [tab title="Tab1"][box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box][/tab] [tab title="Tab2"][h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs size="med" fill="blocks-2" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Up to 5 tabs[/fancy_header] [tabs size="med" fill="blocks-5" convert="cvt-phone-ldsp"] [tab title="Tab1"][box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box][/tab] [tab title="Tab2"][h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab] [tab title="3"][box type="basic-light" align="center"]This is tab THREE. Any content you like goes here. [/box][/tab] [tab title="4"][box type="basic-light" align="center"]This is tab FOUR. Any content you like goes here. [/box][/tab] [tab title="etc"][box type="basic-light" align="center"]This is tab FIVE, you get the idea. You can have a maximum of 6 tabs in this format.[/box][/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs size="med" fill="blocks-5" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Vertical tabs[/fancy_header] [tabs layout="vertical" convert="cvt-phone-ldsp"] [tab title="Tab1"][box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box][/tab] [tab title="Tab2"][h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Medium[/fancy_header] [tabs size="med" layout="vertical" convert="cvt-phone-ldsp"] [tab title="Tab1"][box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box][/tab] [tab title="Tab2"][h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p][/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs size="med" layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Large[/fancy_header] [tabs size="lrg" layout="vertical"] [tab title="Tab1"] [box type="basic-light" align="center"]This is tab one. Any content you like goes here. [/box] [/tab] [tab title="Tab2"] [h2]React has unlimited colors[/h2][image src="2014/06/3740308199_0341325acb_o.jpg" frame="style2" align="right" width="300" height="200" alt="alt_tag"] [p]Tab number two: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [p]Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.[/p] [/tab] [/tabs] [accordion style="plain"] [accordion_toggle title="Get code"]

[tabs size="lrg" layout="vertical" convert="cvt-phone-ldsp"]
[tab title="Tab1"]
...
[/tab]
[/tabs]

[/accordion_toggle] [/accordion]

Download - $44

Hello!

Ask a new question

Cart

Cart

What’s this?

Small

React has unlimited colors

Get code

Medium

React has unlimited colors

Get code

Large

React has unlimited colors

Get code

Add animation

React has unlimited colors

Get code

Fill all space

React has unlimited colors

Get code

Up to 5 tabs

React has unlimited colors

Get code

Vertical tabs

React has unlimited colors

Get code

Medium

React has unlimited colors

Get code

Large

React has unlimited colors

Get code

Variations

Change the Skin for this Case Study

Demos

Hello!

Need help?

Ask a new question

Report a bug

Tabs

What’s this?

Small

React has unlimited colors

Medium

React has unlimited colors

Large

React has unlimited colors

Add animation

React has unlimited colors

Fill all space

React has unlimited colors

Up to 5 tabs

React has unlimited colors

Vertical tabs

React has unlimited colors

Medium

React has unlimited colors

Large

React has unlimited colors

Variations

Change the Skin for this Case Study

Demos