KTUIKTUI
KTUIKTUI
ComponentsDocsStudio

Getting Started

IntroductionInstallationApproachThemingJavaScriptTypeScriptDark modeRTLReferencesChangelog - v1.2.4Metronic TemplatePopular

Components

AccordionAvatarAlertBadgeBreadcrumbButtonCardCarouselNewClipboardNewCheckboxCollapseDatatableUpdateContext MenuNewDismissDrawerDropdownImage InputInputKbdLinkModalPaginationPin inputNewProgressRadio GroupRange SliderNewRatingNewReparentRepeaterNewScrollableScrollspyScrolltoSelectSeparatorSkeletonStepperStickySwitchTabsTextareaTheme SwitchToastTooltipToggleToggle GroupToggle PasswordTooltip
©2026 KtUI. All rights reserved.
A project by Keenthemes
Docs
Tailwind Tabs

Tailwind Tabs

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.

<div class="space-y-3">
  <div class="kt-tabs kt-tabs-line" data-kt-tabs="true">
    <button class="kt-tab-toggle active" data-kt-tab-toggle="#tab_1_1">
      Tab 1</button
    ><button class="kt-tab-toggle" data-kt-tab-toggle="#tab_1_2">Tab 2</button
    ><button class="kt-tab-toggle" data-kt-tab-toggle="#tab_1_3">Tab 3</button>
  </div>
  <div class="text-sm">
    <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>
  </div>
</div>

Icons

Enhance your Tailwind Tabs by integrating icons for a more intuitive and visually engaging navigation experience.

<div class="space-y-3">
  <div class="kt-tabs kt-tabs-line" data-kt-tabs="true">
    <button class="kt-tab-toggle active" data-kt-tab-toggle="#tab_1_1">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-badge-check"
        aria-hidden="true"
      >
        <path
          d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
        ></path>
        <path d="m9 12 2 2 4-4"></path></svg
      >Tab 1</button
    ><button class="kt-tab-toggle" data-kt-tab-toggle="#tab_1_2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-square-user"
        aria-hidden="true"
      >
        <rect width="18" height="18" x="3" y="3" rx="2"></rect>
        <circle cx="12" cy="10" r="3"></circle>
        <path d="M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"></path></svg
      >Tab 2</button
    ><button class="kt-tab-toggle" data-kt-tab-toggle="#tab_1_3">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="lucide lucide-calendar"
        aria-hidden="true"
      >
        <path d="M8 2v4"></path>
        <path d="M16 2v4"></path>
        <rect width="18" height="18" x="3" y="4" rx="2"></rect>
        <path d="M3 10h18"></path></svg
      >Tab 3
    </button>
  </div>
  <div class="text-sm">
    <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>
  </div>
</div>

Transition

Enable smooth transition effects using Tailwind Transition classes to enhance the user experience of Tailwind Tabs.

<div class="flex flex-col gap-3 text-sm">
  <div
    class="flex items-center gap-7 border-b border-neutral-200 dark:border-neutral-700"
    data-kt-tabs="true"
  >
    <button
      class="py-2 border-b-2 border-b-transparent text-neutral-700 dark:text-neutral-200 hover:text-blue-600 kt-tab-active:text-blue-600 kt-tab-active:border-b-blue-600 active"
      data-kt-tab-toggle="#tab_1_1"
    >
      Tab 1</button
    ><button
      class="py-2 border-b-2 border-b-transparent text-neutral-700 dark:text-neutral-200 hover:text-blue-600 kt-tab-active:text-blue-600 kt-tab-active:border-b-blue-600"
      data-kt-tab-toggle="#tab_1_2"
    >
      Tab 2</button
    ><button
      class="py-2 border-b-2 border-b-transparent text-neutral-700 dark:text-neutral-200 hover:text-blue-600 kt-tab-active:text-blue-600 kt-tab-active:border-b-blue-600"
      data-kt-tab-toggle="#tab_1_3"
    >
      Tab 3
    </button>
  </div>
  <div class="text-sm">
    <div
      class="transition-opacity duration-700 text-neutral-700 dark:text-neutral-200"
      id="tab_1_1"
    >
      Tab
      <!-- -->1<!-- -->
      content.
    </div>
    <div
      class="hidden transition-opacity duration-700 text-neutral-700 dark:text-neutral-200"
      id="tab_1_2"
    >
      Tab
      <!-- -->2<!-- -->
      content.
    </div>
    <div
      class="hidden transition-opacity duration-700 text-neutral-700 dark:text-neutral-200"
      id="tab_1_3"
    >
      Tab
      <!-- -->3<!-- -->
      content.
    </div>
  </div>
</div>

Button

Integrate Tailwind Tabs with the Tailwind Button component to enable a more focused and cohesive navigation style.

<div class="space-y-3 text-sm">
  <div class="flex items-center gap-2.5" data-kt-tabs="true">
    <button class="kt-btn kt-btn-outline active" data-kt-tab-toggle="#tab_1_1">
      Tab 1</button
    ><button class="kt-btn kt-btn-outline" data-kt-tab-toggle="#tab_1_2">
      Tab 2</button
    ><button class="kt-btn kt-btn-outline" data-kt-tab-toggle="#tab_1_3">
      Tab 3
    </button>
  </div>
  <div class="text-sm">
    <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>
  </div>
</div>

Dropdown Menu

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

<div class="space-y-3">
  <div class="kt-tabs kt-tabs-line" data-kt-tabs="true">
    <button class="kt-tab-toggle active" data-kt-tab-toggle="#tab_1">
      Tab 1</button
    ><button class="kt-tab-toggle" data-kt-tab-toggle="#tab_2">Tab 2</button
    ><button class="kt-tab-toggle" data-kt-tab-toggle="#tab_3">Tab 3</button>
    <div
      class="inline-flex"
      data-kt-dropdown="true"
      data-kt-dropdown-trigger="click"
    >
      <button
        class="kt-tab-toggle gap-1 flex items-center active"
        data-kt-dropdown-toggle="true"
      >
        Dropdown Menu<svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
          class="lucide lucide-chevron-down"
          aria-hidden="true"
        >
          <path d="m6 9 6 6 6-6"></path>
        </svg>
      </button>
      <div class="kt-dropdown-menu w-40" data-kt-dropdown-menu="true">
        <div class="">
          <button
            class="kt-dropdown-menu-link"
            data-kt-dropdown-dismiss="true"
            data-kt-tab-toggle="#tab_4"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-badge-check"
              aria-hidden="true"
            >
              <path
                d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"
              ></path>
              <path d="m9 12 2 2 4-4"></path></svg
            >Tab 4
          </button>
        </div>
        <div class="">
          <button
            class="kt-dropdown-menu-link"
            data-kt-dropdown-dismiss="true"
            data-kt-tab-toggle="#tab_5"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-square-user"
              aria-hidden="true"
            >
              <rect width="18" height="18" x="3" y="3" rx="2"></rect>
              <circle cx="12" cy="10" r="3"></circle>
              <path d="M7 21v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"></path></svg
            >Tab 5
          </button>
        </div>
        <div class="">
          <button
            class="kt-dropdown-menu-link"
            data-kt-dropdown-dismiss="true"
            data-kt-tab-toggle="#tab_6"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="lucide lucide-calendar"
              aria-hidden="true"
            >
              <path d="M8 2v4"></path>
              <path d="M16 2v4"></path>
              <rect width="18" height="18" x="3" y="4" rx="2"></rect>
              <path d="M3 10h18"></path></svg
            >Tab 6
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="text-sm">
    <div class="" id="tab_1">
      Tab
      <!-- -->1<!-- -->
      content.
    </div>
    <div class="hidden" id="tab_2">
      Tab
      <!-- -->2<!-- -->
      content.
    </div>
    <div class="hidden" id="tab_3">
      Tab
      <!-- -->3<!-- -->
      content.
    </div>
    <div class="hidden" id="tab_4">
      Tab
      <!-- -->4<!-- -->
      content.
    </div>
    <div class="hidden" id="tab_5">
      Tab
      <!-- -->5<!-- -->
      content.
    </div>
    <div class="hidden" id="tab_6">
      Tab
      <!-- -->6<!-- -->
      content.
    </div>
  </div>
</div>

Component API

Options

These data attributes allow you to set options for the tabs component during auto initialization.

NameTypeDefaultDescription
data-kt-tabsbooleantrueAutomatically 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.

NameDescription
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.

NameDescription
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.

MethodDescription
new KTTabs(element, options)Creates an object instance of KTTabs class for the given DOM element and configuration options .
show(tabElement)Activates the tab button element and displays its associated content pane. The tabElement must be a button element with data-kt-tab-toggle attribute that points to the content element.
const tabsEl = document.querySelector('#my_tabs');
// Select the button element with data-kt-tab-toggle attribute
const tabButton = tabsEl.querySelector('button[data-kt-tab-toggle="#tab_1_2"]');
const tabs = KTTabs.getInstance(tabsEl);
 
tabs.show(tabButton);

Utilities

Manage and interact with KTTabs instances using these static methods of KTTabs JavaScript class.

MethodDescription
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 tabss
KTTabs.init();
 
// Initialzie pending tabss
KTTabs.createInstances();
 
// Get tabs object
const 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.

EventDescription
showTriggers before a tab is shown, allowing for actions right before the tab's content becomes visible.
shownTriggers 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');
});

TypeScript

Import the component and types from @keenthemes/ktui for typed options and instance:

import {
  KTTabs,
  type KTTabsConfigInterface,
  type KTTabsInterface,
} from '@keenthemes/ktui';
 
const tabsEl = document.querySelector<HTMLElement>('#my_tabs');
if (!tabsEl) return;
 
const tabs: KTTabsInterface | null = KTTabs.getInstance(tabsEl);
if (tabs) tabs.show(tabsEl.querySelector<HTMLElement>('[data-kt-tabs-target]')!);
 
const options: KTTabsConfigInterface = {};
const instance
PreviouseSwitchNextTextarea

On This Page

  • Examples
    • Basic Tabs
    • Icons
    • Transition
    • Button
    • Dropdown Menu
  • Component API
    • Options
    • Selectors
    • Tailwind Modifiers
    • Methods
    • Utilities
    • Events
  • TypeScript
string
"hidden"
Tailwind class to use for the hidden state of the tab contents.
isShown(tabElement)
Checks whether the content associated with the specified tab button element is currently visible. The tabElement must be a button element with data-kt-tab-toggle attribute.
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.
:
KTTabsInterface
=
new
KTTabs
(tabsEl, options);