Preview Purchase
Navigation

Tailwind CSS Tabs

Tailwind CSS 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.

Basic Tabs

A basic Tailwind CSS Tabs example to navigate between different content areas.
Preview HTML
Tab 1 content.

Icons

Use KeenIcons to integrate icons into Tailwind CSS Tabs providing an intuitive navigation experience.
Preview HTML
Tab 1 content.

Notification

An example of Tailwind CSS Tabs that includes notification badges, offering a clear and effective way to highlight updates or messages within each tab.
Preview HTML
Tab 1 content.

Transition

Enable smooth transition effects using Tailwind CSS Transition classes to enhance the user experience of Tailwind CSS Tabs.
Preview HTML
Tab 1 content.

Dropdown

Integrate Tailwind CSS Tabs with the Tailwind CSS Dropdown component to enable advanced navigation support.
Preview HTML

Group

Integrate Tailwind CSS Tabs with the Tailwind CSS Button Tabs component to enable a visually grouped navigation style.
Preview HTML
Tab 1 content.

Button

Integrate Tailwind CSS Tabs with the Tailwind CSS Button component to enable a more focused and cohesive navigation style.
Preview HTML
Tab 1 Tab 2 Tab 3
Tab 1 content.

Source Code

The following source files manage the JavaScript behavior and CSS styles of the Tailwind CSS Tabs component. Upon building the assets using Webpack Build Tools , these files are compiled and added into the dist/assets/css/styles.css and dist/assets/js/core.bundle.js bundles, making them available globally across all pages.
File Description
src/core/components/tabs/tabs.ts The TypeScript source file that manages the JavaScript behavior of the Tailwind CSS Tabs component.
src/core/plugins/components/tabs.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Tabs component.

HTML Markup

The following markup outlines the core structure of the Tailwind CSS Tabs component. 
				
					<div class="flex gap-4 border-b border-b-gray-200 mb-5" data-tabs="true">
 <button class="btn rounded-none border-0 border-b-2 border-b-transparent tab-active:border-b-primary tab-active:text-primary active" data-tab-toggle="#tab_1_1">
  Tab 1
 </button>
 <button class="btn rounded-none border-0 border-b-2 border-b-transparent tab-active:border-b-primary tab-active:text-primary" data-tab-toggle="#tab_1_2">
  Tab 2
 </button>
 <button class="btn rounded-none border-0 border-b-2 border-b-transparent tab-active:border-b-primary tab-active:text-primary" data-tab-toggle="#tab_1_3">
  Tab 3
 </button>
</div>
<div class="" id="tab_1_1">
 Tab 1 content.
</div>
<div class="hidden" id="tab_1_2">
 Tab 2 content.
</div>
<div class="hidden" id="tab_1_3">
 Tab 3 content.
</div>

Variants

Utilize the following Tailwind CSS Tabs variants to manage the appearance of the tabs items and their child elements. For more information, refer to the Tailwind CSS Variant documentation .
Class Description
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. 
				
					<div class="flex gap-4 border-b border-b-gray-200 mb-5" data-tabs="true">
 <button class="btn rounded-none border-0 border-b-2 border-b-transparent tab-active:border-b-primary tab-active:text-primary active" data-tab-toggle="#tab_1_1">
  Tab 1
 </button>
 <button class="btn rounded-none border-0 border-b-2 border-b-transparent tab-active:border-b-primary tab-active:text-primary" data-tab-toggle="#tab_1_2">
  Tab 2
 </button>
 <button class="btn rounded-none border-0 border-b-2 border-b-transparent tab-active:border-b-primary tab-active:text-primary" data-tab-toggle="#tab_1_3">
  Tab 3
 </button>
</div>

Data Attribute Initialization

Auto-initialize all KTTabs instances on page load by adding the data-tabs="true" attribute to your tabs element. This triggers on the fly initialization by the KTTabs JavaScript component. 
				
					<div class="flex gap-4 border-b border-b-gray-200 mb-5" data-tabs="true" id="my_tabs">
 <button class="btn rounded-none border-0 border-b-2 border-b-transparent tab-active:border-b-primary tab-active:text-primary active" data-tab-toggle="#tab_1_1">
  Tab 1
 </button>
 <button class="btn rounded-none border-0 border-b-2 border-b-transparent tab-active:border-b-primary tab-active:text-primary" data-tab-toggle="#tab_1_2">
  Tab 2
 </button>
</div>
<div class="" id="tab_1_1">
 Tab 1 content.
</div>
<div class="hidden" id="tab_1_2">
 Tab 2 content.
</div>
These attributes allow you to set options for the KTTabs component during initialization. The values you provide as strings are automatically converted to the appropriate KTTabs Options .
HTML Attribute Type Default Description
data-tabs boolean true Automatically initializes Tailwind CSS Tabs instances on page load. This can be disabled for manual initialization via JavaScript.
data-tabs-hidden-class string "hidden" Tailwind CSS class to use for the hidden state of the tab contents.

JavaScript Initialization

To initialize a new tabs component, pass the corresponding DOM element and configuration options to the KTTabs class constructor.
JavaScript HTML 
				
					const tabsEl = document.querySelector('#my_tabs');
const options = {
	hiddenClass: 'hidden'
};

const tabs = new KTTabs(tabsEl, options);

To initialize the tabs with JavaScript, use data-tabs="false" attribute instead. This prevents automatic initialization on page load.

Options

This table outlines the configuration options for initialization of Tailwind CSS Tabs instances, using the KTTabs JavaScript component.
Option Type Default Description
zindex number 105 Defines the z-index of the tabs, ensuring it layers correctly above or beneath other page elements.
hiddenClass string "hidden" Tailwind CSS class to use for the hidden state of the tab contents.

Utilities

Manage and interact with KTTabs instances using these static methods of KTTabs class.
Method Description
init() Automatically initializes KTTabs object for all elements with the data-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 KTTabs object 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.
JavaScript HTML 
				
					// Initialize all tabss
KTTabs.init()

// Initialzie pending tabss
KTTabs.createInstances();

// Get tabs object
const tabsEl = document.querySelector('#my_tabs');
const tabs = KTTabs.getInstance(tabsEl);

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.
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.
JavaScript HTML 
				
					const tabsEl = document.querySelector('#my_tabs');
const tabEl = document.querySelector('#my_tab');
const tabs = KTTabs.getInstance(tabsEl);

tabs.show(tabEl);

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. 
				
					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');
});
Previous Sticky Next Checkbox