Tailwind Tabs component provides a user-friendly and efficient way to organize content into separate, easily navigable sections. By using tabs, you can create a clean and organized interface, allowing users to quickly switch between different content areas without navigating away from the page.
A basic Tailwind Tabs example to navigate between different content areas.
Enhance your Tailwind Tabs by integrating icons for a more intuitive and visually engaging navigation experience.
Enable smooth transition effects using Tailwind Transition classes to enhance the user experience of Tailwind Tabs.
Integrate Tailwind Tabs with the Tailwind Button component to enable a more focused and cohesive navigation style.
Integrate Tailwind Tabs with the Tailwind Dropdown component to enable advanced navigation support.
These data attributes allow you to set options for the tabs component during auto initialization.
| Name | Type | Default | Description |
|---|---|---|---|
data-kt-tabs | boolean | true | Automatically initializes Tailwind Tabs instances on page load. This can be disabled for manual initialization via JavaScript. |
data-kt-tabs-hidden-class | string | "hidden" | Tailwind class to use for the hidden state of the tab contents. |
This table details the custom classes and data attributes used by the tabs component.
| Name | Description |
|---|---|
| Data Attributes | |
data-kt-tabs="true" | Automatically initializes Tailwind Tabs instances on page load. |
data-kt-tab-toggle="#tab_content" | Toggles a tab content specified with an ID selector "#tab_content". |
Custom modifiers to control the tabs’s style and behavior with Tailwind classes.
| Name | Description |
|---|---|
kt-tab-active:* | A custom Tailwind variant activated when a tab is shown. It can be applied to the tabs toggle element and its children, controlling their appearance and behavior in the open state. |
Use KTTabs component's API methods to programmatically control its behavior.
| Method | Description |
|---|---|
new KTTabs(element, options) | Creates an object instance of KTTabs class for the given DOM element and configuration options . |
show(tabElement) | Activates the tab and displays its associated content pane that corresponds to the given DOM element . This method makes the specified tab active and reveals its content, while hiding other tabs' content. |
isShown(tabElement) | Checks whether the content associated with the specified tab element is currently visible. Returns a boolean value: true if the tab's content is displayed, and false otherwise. |
getOption(name) | Retrieves the value of a configuration option by name parameter from a KTTabs instance. |
getElement() | Retrieves the DOM element linked to a specific KTTabs instance. |
on(eventName, handler) | Allows attaching event listeners to the KTTabs custom events using the eventName and eventId string parameters. These events enable programmatic interaction based on user actions or internal state changes of KTTabs. The function returns string as a unique identifier for the registered listener, allowing you to remove it later if needed. |
off(eventName, eventId) | Removes an event listener for the eventName and eventId parameters attached with the on method. |
dispose() | Removes the KTTabs instance from an element, including any associated data stored on the DOM element. |
const tabsEl = document.querySelector('#my_tabs');
const tabEl = document.querySelector('#my_tab');
const tabs = KTTabs.getInstance(tabsEl);
tabs.show(tabEl);Manage and interact with KTTabs instances using these static methods of KTTabs JavaScript class.
| Method | Description |
|---|---|
init() | Automatically initializes KTTabs object for all elements with the data-kt-tabs="true" attribute on page load. |
createInstances() | Allows to create KTTabs instances for all elements that have been dynamically added to the DOM but haven't been activated yet. |
getInstance(element) | Returns the KTTabsobject associated with the given DOM element element . |
getOrCreateInstance(element) | Returns the existing KTTabs object for the provided DOM element element , or creates a new instance if none exists, then returns the same. |
// Initialize all tabss
KTTabs.init()
// Initialzie pending tabss
KTTabs.createInstances();
// Get tabs object
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);KTTabs custom events allows you to register callback functions(event listeners) that will be invoked automatically whenever specific custom events are triggered within the component.
| Event | Description |
|---|---|
show | Triggers before a tab is shown, allowing for actions right before the tab's content becomes visible. |
shown | Triggers after a tab is fully displayed, indicating that the tab content is now visible to the user. |
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);
tabs.on('show', (detail) => {
detail.cancel = true;
console.log('show action canceled');
});
tabs.on('shown', () => {
console.log('shown event');
});