- Components
- Tabs
Navigations
Tailwind CSS Tabs
Tabs make it easy to switch between different views.
Requires JS
Note that this component requires the use of our Tabs plugin, else you can skip this message if you are already using Preline UI as a package.
About
Use the tab JavaScript plugin - to extend our navigational tabs and pills to create tabbable panes of local content.
Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers). As a best practice, we recommend using <button> elements for the tabs, as these are controls that trigger a dynamic change, rather than links that navigate to a new page or location.
Tabs with underline
A basic form of tabs with underline.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Tabs with icons
Contained tabs with icons.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Centered New
Automatically scroll to center when selecting a tab.
Require JS
Note that this demo requires the use of our Scroll Nav plugin, else you can skip this message if you are already using Preline UI as a package. We also include Lodash to use the utility functions provided by this library.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
This is the fourth item's tab body.
This is the fifth item's tab body.
This is the sixth item's tab body.
This is the seventh item's tab body.
This is the eighth item's tab body.
This is the ninth item's tab body.
This is the tenth item's tab body.
This is the eleventh item's tab body.
This is the twelfth item's tab body.
This is the thirteenth item's tab body.
This is the fourteenth item's tab body.
This is the fifteenth item's tab body.
Tabs with badges
Contained tabs with badges.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Horizontal alignment
Centered with .justify-center:
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Right-aligned with .justify-end:
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Vertical
Vertically stacked navigation.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Card type tab
Another type of Tabs.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Horizontal scroll
Where long content doesn't fit on the screen, horizontal scrollbar keeps the tab bar inline.
Resize the example to see it in action.
Select on mobile
Where long content doesn't fit on the screen, change the tab bar to <select> on mobile.
Resize the example to see it in action.
Segment
Another type of Tabs with segment.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Bar with underline
Another type of Tabs with underlined bar.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Pills on gray color
Another type of Tabs with pills on gray color.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Pills with brand color
Another type of Tabs with pills.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Fill and justify
Force your nav's contents to extend the full available width one of two modifier classes. Notice that all horizontal space is occupied, but not every nav item has the same width.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Equal-width elements
All horizontal space will be occupied by nav links, but unlike the example above, every nav item will be the same width.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
Open on hover New
This example features tabs that open and close dynamically when hovered over.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
This is the fourth item's tab body.
This is the fifth item's tab body.
This is the sixth item's tab body.
This is the seventh item's tab body.
This is the eighth item's tab body.
This is the ninth item's tab body.
This is the tenth item's tab body.
Destroy and Reinitialize New
Provides destroy method that helps to destroy a tabs.
This is the first item's tab body.
This is the second item's tab body.
This is the third item's tab body.
