Classic Tabs
HORIZONTAL TABS
Top Left positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Top Center positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Top Right positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Bottom Left positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Bottom Center positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Bottom Right positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
VERTICAL TABS
Right positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Left positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Pill Styled Tabs
For the pills tabs you have all the same options as above, but more control over your titles background, borders etc.
HORIZONTAL TABS
Top Left positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
For the pill styled tabs all positions are available as shown above for the classic tab styles.
Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left and Right.
Top Left, Top Center, Top Right, Bottom Left, Bottom Center, Bottom Right, Left and Right.
VERTICAL TABS
Left positioned
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Same goes for the pill styled vertical tabs, they can either have a left or right positioned menu.
The menu width of vertical tabs can be specified as well.
The menu width of vertical tabs can be specified as well.
Options
STYLING OPTIONS
You will have complete control over the styles of your titles when it comes to colors, font size, borders, background, this for both the normal title and the selected tab title.
The titles can be increased in size, both height and width, or can be set so they adapt to the width available:
The titles can be increased in size, both height and width, or can be set so they adapt to the width available:
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
Titles itself the can be aligned as well to either: left, center or right.
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
TAB FUNCTIONS
Responsive - Accordion
For responsive purposes and an optimized user experience for smaller devices,
the tabs convert to accordion. This way visitors won't get lost when going through your content.
By default the tabs are being converted to accordions at a screen width of 767px, so all sizes below
will display the tabs as an accordion.
This value can be modified however, so the number can be set either higher or lower, this option
only require changing if you are having a lot of tabs and the screen width won't allow to enter all
of it at once, in this case it is better to show an accordion.
the tabs convert to accordion. This way visitors won't get lost when going through your content.
By default the tabs are being converted to accordions at a screen width of 767px, so all sizes below
will display the tabs as an accordion.
This value can be modified however, so the number can be set either higher or lower, this option
only require changing if you are having a lot of tabs and the screen width won't allow to enter all
of it at once, in this case it is better to show an accordion.
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
On the above example the accordion is being activated on screens smaller than 1750px. Note that you can specify font sizes independently for these type of titles as well.
Accordions can be shown without any content area shown initially, so your titles are all visible at the same time.
Accordions can be shown without any content area shown initially, so your titles are all visible at the same time.
Active tab on load
The tab that needs to be opened on page load can be selected.
Tab 1
Tab 2
Tab 3
Tab 1
Tab content 1
Tab 2
Tab content 2
Tab 3
Tab content 3
The above example will show content of tab 3 on page load.
Text or Image
You can use text or/and an image for each title.
The text can be added above or under the image, or both if needed.
The text can be added above or under the image, or both if needed.
Nested
Tabs can be nested inside tabs, so it is possible to include tabs within tabs, for deeper organization purposes.
Thanks for watching :)