Tailwind Tabs

Docs

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>

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.

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.
`isShown(tabElement)`

const tabsEl = document.querySelector('#my_tabs');
const tabEl = document.querySelector('#my_tab');
const tabs = KTTabs.getInstance(tabsEl);
 
tabs.show(tabEl);

Utilities

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

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');
});

PreviouseSwitch NextTextarea

On This Page

Examples
Component API