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.
Examples
Basic Tabs
A basic Tailwind Tabs example to navigate between different content areas.
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
Selectors
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".
Tailwind Modifiers
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.
Methods
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.
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 object associated with the given DOM element .
// Initialize all tabssKTTabs.init();// Initialzie pending tabssKTTabs.createInstances();// Get tabs objectconst tabsEl = document.querySelector('#my_tabs');const tabs = KTTabs.getInstance(tabsEl);
Events
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.
Tailwind class to use for the hidden state of the tab contents.
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.
KTTabs
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.