Navigation
Tabs & Pills
Tabs allow users to easily switch between different views, providing a seamless and efficient navigation experience.
Basic example
Default
Basic example of tab.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Filled
Example with Filled tabs.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Vertical tab
To create vertical tabs, you can use the `tabs-vertical` class. Additionally, you should add a `flex` class to a surrounding `div` to ensure the tabs and their associated content are displayed side by side.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Size variants
Extra small tab
Add responsive class `tabs-{size}` where `{size} = xs|sm|md|lg|xl` for tab of different sizes.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Small tab
Add responsive class `tabs-{size}` where `{size} = xs|sm|md|lg|xl` for tab of different sizes.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Default tab
Add responsive class `tabs-{size}` where `{size} = xs|sm|md|lg|xl` for tab of different sizes.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Large tab
Add responsive class `tabs-{size}` where `{size} = xs|sm|md|lg|xl` for tab of different sizes.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Extra large tab
Add responsive class `tabs-{size}` where `{size} = xs|sm|md|lg|xl` for tab of different sizes.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Alignment
Align center
Centered with TailwindCSS class `justify-center`.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Align end
Align at the end TailwindCSS class `justify-end`.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Illustrations
Icons
Below example shows tabs with icons.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Badges
Below example shows tabs with badges.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Lifted tab
Apply the `tabs-lifted` component class along with `tabs` to display the tab in a lifted style.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Horizontal scroll
When content extends beyond the screen, a horizontal scrollbar ensures the tab bar remains aligned. Apply the `overflow-x-auto` class for a scrollbar. Resize the window to see an example.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Settings: Adjust your preferences, manage your account, and configure your privacy settings here.
Help: Find answers to frequently asked questions, get in touch with support, or read through user guides.
Notifications: Manage your notifications, set preferences, and view your notification history.
Feedback: Share your thoughts, report issues, or suggest new features to improve the platform.
Hover
This example demonstrates tabs that dynamically open and close on hover, highlighting the use of `eventType:`.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a tab element.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Responsive
Select
The demonstration illustrates responsiveness by showcasing how the tabs switch to a select menu on smaller screens.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Pill Illustrations
Segments
Below example shows tabs as segments.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Pill with semantic color
Use component classes `btn` and `btn-text` to style pills with a button-like appearance.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Pills with icon
Below example shows pills with icons.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Filled pills
Below example shows Filled pills.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
Vertical Pill
For tabs styled with the `tabs-vertical` class and pills styled with Tailwind classes, please make sure they are distinct and not linked.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
JavaScript behavior
Methods — Method usage
The `HSTabs` object is contained within the global `window` object.
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
JavaScript
const { element } = HSTabs.getInstance('#tabs', true);
const destroyBtn = document.querySelector('#destroy-btn');
destroyBtn.addEventListener('click', () => {
element.destroy();
});Events — Event usage
METHOD| DESCRIPTION|RETURNED VALUE `on:change`|Triggered whenever a dropdown menu is opened.| <ul><li><code>el</code> HTMLElement. Toggle button (element that was clicked).</li><li><code>prev</code> string. Previous tab ID.</li><li><code>current</code> string. Current tab ID.</li></ul>
Welcome to the Home tab! Explore the latest updates and news here.
This is your Profile tab, where you can update your personal information and manage your account details.
Messages: View your recent messages, chat with friends, and manage your conversations.
JavaScript
const el = HSTabs.getInstance('#tabs-event');
el.on('change', ({ el, prev, current }) => {
console.log('el', el)
console.log('prev', prev)
console.log('current', current)
})Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
tabs | component | Base class for tabs container. |
tab | component | Base class for tab items. |
tabs-bordered | style | This class adds a bottom border to each tab item. |
tabs-lifted | style | This class applies a lifted style to each tab item. |
tab-active | state | active state for tabs-bordered and tabs-lifted. |
active | state | Enables the selection of a tab to be initially displayed. |
active-tab:{tw-utility-class} | variant | The modifier allows setting Tailwind classes when the tab is active for toggle and for content. |
tabs-xs | size | Extra small tabs. |
tabs-sm | size | Small tabs. |
tabs-md | size | Medium(default) tabs. |
tabs-lg | size | Large tabs. |
tabs-xl | size | Extra large tabs. |