Tailwind Dropdown

Docs

Tailwind Dropdown

The Tailwind Dropdown is a versatile component used to display overlay content on a web page, which can include menus, tabs, and other interactive elements. It's designed for creating a layered navigation experience, allowing users to access various content types without leaving the current page context.

Examples

Basic Usage

A simple example of a Tailwind Dropdown that is toggled by a button.

<div
  class="inline-flex"
  data-kt-dropdown="true"
  data-kt-dropdown-trigger="click"
>
  <button class="kt-btn" data-kt-dropdown-toggle="true">Show Dropdown</button>
  <div
    class="kt-dropdown w-full max-w-56 p-3 text-sm"
    data-kt-dropdown-menu="true"
  >
    The Tailwind Dropdown component offers a sleek, user-friendly interface for
    presenting overlay content.
  </div>
</div>

Arrow

Integrate an animated arrow icon to indicate when the dropdown is open.

<div data-kt-dropdown="true" data-kt-dropdown-trigger="click">
  <button class="kt-btn" data-kt-dropdown-toggle="true">
    Show Dropdown<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 kt-dropdown-open:hidden"
      aria-hidden="true"
    >
      <path d="m6 9 6 6 6-6"></path></svg
    ><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-up hidden kt-dropdown-open:inline"
      aria-hidden="true"
    >
      <path d="m18 15-6-6-6 6"></path>
    </svg>
  </button>
  <div
    class="kt-dropdown w-full max-w-56 p-3 text-sm"
    data-kt-dropdown-menu="true"
  >
    The Tailwind Dropdown component offers a sleek, user-friendly interface for
    presenting overlay content.
  </div>
</div>

Separator

Divide the dropdown content into sections using a separator element for better organization.

<div
  class="inline-flex"
  data-kt-dropdown="true"
  data-kt-dropdown-trigger="click"
>
  <button class="kt-btn" data-kt-dropdown-toggle="true">Show Dropdown</button>
  <div class="kt-dropdown max-w-56 text-sm" data-kt-dropdown-menu="true">
    <div class="kt-dropdown-header">Header</div>
    <div class="kt-dropdown-body">
      The Tailwind Dropdown component offers a sleek, user-friendly interface
      for presenting overlay content.
    </div>
    <div class="kt-dropdown-footer">Footer</div>
  </div>
</div>

Width

Use Tailwind Width classes to customize the dropdown width.

<div
  class="inline-flex"
  data-kt-dropdown="true"
  data-kt-dropdown-trigger="click"
>
  <button class="kt-btn" data-kt-dropdown-toggle="true">Show Dropdown</button>
  <div class="kt-dropdown max-w-72 p-3 text-sm" data-kt-dropdown-menu="true">
    The Tailwind Dropdown component offers a sleek, user-friendly interface for
    presenting overlay content.
  </div>
</div>

Scrollable

Apply the .kt-scrollable-y class to the dropdown content element to enable vertical scrolling within it using Tailwind Scrollable component.

<div
  class="inline-flex"
  data-kt-dropdown="true"
  data-kt-dropdown-trigger="click"
>
  <button class="kt-btn" data-kt-dropdown-toggle="true">Show Dropdown</button>
  <div class="kt-dropdown max-w-56 text-sm" data-kt-dropdown-menu="true">
    <div class="kt-dropdown-header">Header</div>
    <div class="kt-dropdown-body kt-scrollable overflow-y-auto pe-2 w-56 h-40">
      <div class="rounded-lg bg-muted w-full grow h-[400px]"></div>
    </div>
    <div class="kt-dropdown-footer">Footer</div>
  </div>
</div>

Dismiss

Set the data-kt-dropdown-dismiss="true" attribute on an element within the dropdown content to close the dropdown when that element is clicked.

<div
  class="inline-flex"
  data-kt-dropdown="true"
  data-kt-dropdown-trigger="click"
>
  <button class="kt-btn" data-kt-dropdown-toggle="true">Show Dropdown</button>
  <div
    class="kt-dropdown w-full max-w-56 p-3 text-sm"
    data-kt-dropdown-menu="true"
  >
    <p class="mb-2.5">
      The Tailwind Dropdown component offers a sleek, user-friendly interface
      for presenting overlay content.
    </p>
    <button
      type="button"
      class="kt-btn kt-btn-outline"
      data-kt-dropdown-dismiss="true"
    >
      Click to dismiss
    </button>
  </div>
</div>

Permanent

Set the data-kt-dropdown-permanent="true" attribute on a dropdown element to prevent it from being closed.

<div
  class="inline-flex"
  data-kt-dropdown="true"
  data-kt-dropdown-trigger="click"
  data-kt-dropdown-permanent="true"
>
  <button class="kt-btn" data-kt-dropdown-toggle="true">Show Dropdown</button>
  <div class="kt-dropdown max-w-56 p-3 text-sm" data-kt-dropdown-menu="true">
    The Tailwind Dropdown component offers a sleek, user-friendly interface for
    presenting overlay content.
  </div>
</div>

Placement

Use the data-kt-dropdown-placement option to control the opening direction of the Tailwind Dropdown. Explore all available options .

<div class="flex flex-wrap items-center justify-center gap-4 h-[300px]">
  <div
    class="inline-flex"
    data-kt-dropdown="true"
    data-kt-dropdown-trigger="click"
    data-kt-dropdown-placement="top-start"
  >
    <button class="kt-btn" data-kt-dropdown-toggle="true">Top Start</button>
    <div
      class="kt-dropdown w-full max-w-56 p-3 text-sm"
      data-kt-dropdown-menu="true"
    >
      The Tailwind Dropdown component offers a sleek, user-friendly interface
      for presenting overlay content.
    </div>
  </div>
  <div
    class="inline-flex"
    data-kt-dropdown="true"
    data-kt-dropdown-trigger="click"
    data-kt-dropdown-placement="bottom-start"
  >
    <button class="kt-btn" data-kt-dropdown-toggle="true">Bottom Start</button>
    <div
      class="kt-dropdown w-full max-w-56 p-3 text-sm"
      data-kt-dropdown-menu="true"
    >
      The Tailwind Dropdown component offers a sleek, user-friendly interface
      for presenting overlay content.
    </div>
  </div>
  <div
    class="inline-flex"
    data-kt-dropdown="true"
    data-kt-dropdown-trigger="click"
    data-kt-dropdown-placement="left-start"
  >
    <button class="kt-btn" data-kt-dropdown-toggle="true">Left Start</button>
    <div
      class="kt-dropdown w-full max-w-56 p-3 text-sm"
      data-kt-dropdown-menu="true"
    >
      The Tailwind Dropdown component offers a sleek, user-friendly interface
      for presenting overlay content.
    </div>
  </div>
  <div
    class="inline-flex"
    data-kt-dropdown="true"
    data-kt-dropdown-trigger="click"
    data-kt-dropdown-placement="right-start"
  >
    <button class="kt-btn" data-kt-dropdown-toggle="true">Right Start</button>
    <div
      class="kt-dropdown w-full max-w-56 p-3 text-sm"
      data-kt-dropdown-menu="true"
    >
      The Tailwind Dropdown component offers a sleek, user-friendly interface
      for presenting overlay content.
    </div>
  </div>
</div>

Trigger

Utilize the data-kt-dropdown-trigger="click" or data-kt-dropdown-trigger="hover" attribute to set the trigger method for dropdowns.

<div class="flex flex-wrap gap-4">
  <div
    class="inline-flex"
    data-kt-dropdown="true"
    data-kt-dropdown-trigger="click"
  >
    <button class="kt-btn" data-kt-dropdown-toggle="true">
      Trigger - Click
    </button>
    <div
      class="kt-dropdown w-full max-w-56 p-3 text-sm"
      data-kt-dropdown-menu="true"
    >
      The Tailwind Dropdown component offers a sleek, user-friendly interface
      for presenting overlay content.
    </div>
  </div>
  <div
    class="inline-flex"
    data-kt-dropdown="true"
    data-kt-dropdown-trigger="hover"
  >
    <button class="kt-btn" data-kt-dropdown-toggle="true">
      Trigger - Hover
    </button>
    <div
      class="kt-dropdown w-full max-w-56 p-3 text-sm"
      data-kt-dropdown-menu="true"
    >
      The Tailwind Dropdown component offers a sleek, user-friendly interface
      for presenting overlay content.
    </div>
  </div>
</div>

Offset

Use data-kt-dropdown-offset="20px, 20px" attribute to specify the offset of the dropdown from the toggle element, adjusting its position on the x and y axes.

<div
  class="inline-flex"
  data-kt-dropdown="true"
  data-kt-dropdown-trigger="click"
  data-kt-dropdown-offset="20px, 20px"
>
  <button class="kt-btn" data-kt-dropdown-toggle="true">Show Dropdown</button>
  <div class="kt-dropdown max-w-56 p-3 text-sm" data-kt-dropdown-menu="true">
    The Tailwind Dropdown component offers a sleek, user-friendly interface for
    presenting overlay content.
  </div>
</div>

Handle advanced dropdown menus.

<div data-kt-dropdown="true" data-kt-dropdown-trigger="click">
  <button class="kt-btn" data-kt-dropdown-toggle="true">
    Navigation 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-52" data-kt-dropdown-menu="true">
    <ul class="kt-dropdown-menu-sub">
      <li>
        <a href="#" class="kt-dropdown-menu-link"
          ><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-house"
            aria-hidden="true"
          >
            <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"></path>
            <path
              d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
            ></path></svg
          >Dashboard</a
        >
      </li>
      <li>
        <div
          data-kt-dropdown="true"
          data-kt-dropdown-trigger="hover"
          data-kt-dropdown-placement="right-start"
        >
          <button
            data-kt-dropdown-toggle="true"
            class="kt-dropdown-menu-toggle"
          >
            <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-briefcase"
              aria-hidden="true"
            >
              <path d="M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"></path>
              <rect width="20" height="14" x="2" y="6" rx="2"></rect></svg
            >Projects<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-right kt-dropdown-menu-indicator"
              aria-hidden="true"
            >
              <path d="m9 18 6-6-6-6"></path>
            </svg>
          </button>
          <div data-kt-dropdown-menu="true" class="kt-dropdown-menu w-44">
            <ul class="kt-dropdown-menu-sub">
              <li>
                <a href="#" class="kt-dropdown-menu-link"
                  ><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-file-text"
                    aria-hidden="true"
                  >
                    <path
                      d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"
                    ></path>
                    <path d="M14 2v4a2 2 0 0 0 2 2h4"></path>
                    <path d="M10 9H8"></path>
                    <path d="M16 13H8"></path>
                    <path d="M16 17H8"></path></svg
                  >All Projects</a
                >
              </li>
              <li>
                <div
                  data-kt-dropdown="true"
                  data-kt-dropdown-trigger="hover"
                  data-kt-dropdown-placement="right-start"
                >
                  <button
                    data-kt-dropdown-toggle="true"
                    class="kt-dropdown-menu-toggle"
                  >
                    <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-list-todo"
                      aria-hidden="true"
                    >
                      <rect x="3" y="5" width="6" height="6" rx="1"></rect>
                      <path d="m3 17 2 2 4-4"></path>
                      <path d="M13 6h8"></path>
                      <path d="M13 12h8"></path>
                      <path d="M13 18h8"></path></svg
                    >Tasks<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-right kt-dropdown-menu-indicator"
                      aria-hidden="true"
                    >
                      <path d="m9 18 6-6-6-6"></path>
                    </svg>
                  </button>
                  <div
                    data-kt-dropdown-menu="true"
                    class="kt-dropdown-menu w-44"
                  >
                    <ul class="kt-dropdown-menu-sub">
                      <li>
                        <a href="#" class="kt-dropdown-menu-link"
                          ><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-check-big"
                            aria-hidden="true"
                          >
                            <path
                              d="M21 10.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.5"
                            ></path>
                            <path d="m9 11 3 3L22 4"></path></svg
                          >Open Tasks</a
                        >
                      </li>
                      <li>
                        <a href="#" class="kt-dropdown-menu-link"
                          ><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-bookmark-check"
                            aria-hidden="true"
                          >
                            <path
                              d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z"
                            ></path>
                            <path d="m9 10 2 2 4-4"></path></svg
                          >Completed</a
                        >
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
              <li>
                <a href="#" class="kt-dropdown-menu-link"
                  ><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-check-big"
                    aria-hidden="true"
                  >
                    <path
                      d="M21 10.5V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.5"
                    ></path>
                    <path d="m9 11 3 3L22 4"></path></svg
                  >New Project</a
                >
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li>
        <div
          data-kt-dropdown="true"
          data-kt-dropdown-trigger="hover"
          data-kt-dropdown-placement="right-start"
        >
          <button
            data-kt-dropdown-toggle="true"
            class="kt-dropdown-menu-toggle"
          >
            <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-users"
              aria-hidden="true"
            >
              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
              <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
              <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
              <circle cx="9" cy="7" r="4"></circle></svg
            >Team<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-right kt-dropdown-menu-indicator"
              aria-hidden="true"
            >
              <path d="m9 18 6-6-6-6"></path>
            </svg>
          </button>
          <div data-kt-dropdown-menu="true" class="kt-dropdown-menu w-44">
            <ul class="kt-dropdown-menu-sub">
              <li><a href="#" class="kt-dropdown-menu-link">Members</a></li>
              <li><a href="#" class="kt-dropdown-menu-link">Invite</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li>
        <a href="#" class="kt-dropdown-menu-link"
          ><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-days"
            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>
            <path d="M8 14h.01"></path>
            <path d="M12 14h.01"></path>
            <path d="M16 14h.01"></path>
            <path d="M8 18h.01"></path>
            <path d="M12 18h.01"></path>
            <path d="M16 18h.01"></path></svg
          >Calendar</a
        >
      </li>
      <li>
        <a href="#" class="kt-dropdown-menu-link"
          ><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-bell"
            aria-hidden="true"
          >
            <path d="M10.268 21a2 2 0 0 0 3.464 0"></path>
            <path
              d="M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326"
            ></path></svg
          >Notifications<span
            class="ms-auto kt-badge kt-badge-primary kt-badge-sm kt-badge-circle"
            >New</span
          ></a
        >
      </li>
      <li>
        <a href="#" class="kt-dropdown-menu-link"
          ><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-settings"
            aria-hidden="true"
          >
            <path
              d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
            ></path>
            <circle cx="12" cy="12" r="3"></circle></svg
          >Settings</a
        >
      </li>
    </ul>
  </div>
</div>

Display dropdowns inside the Tailwind Modal component.

<div>
  <button class="kt-btn" data-kt-modal-toggle="#modal_1">Show Modal</button>
  <div class="kt-modal" data-kt-modal="true" id="modal_1">
    <div class="kt-modal-content max-w-[400px] top-[10%]">
      <div class="kt-modal-header">
        <h3 class="kt-modal-title">Modal Title</h3>
        <button
          class="kt-modal-close"
          aria-label="Close modal"
          data-kt-modal-dismiss="#modal_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-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="kt-modal-body flex justify-center min-h-60">
        <div
          class="inline-flex"
          data-kt-dropdown="true"
          data-kt-dropdown-trigger="click"
        >
          <button class="kt-btn" data-kt-dropdown-toggle="true">
            Show Dropdown
          </button>
          <div
            class="kt-dropdown w-52 p-3 text-sm"
            data-kt-dropdown-menu="true"
          >
            The Tailwind Dropdown component offers a sleek, user-friendly
            interface for presenting overlay content.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Display Tailwind Tooltip components in dropdowns.

<div data-kt-dropdown="true" data-kt-dropdown-trigger="click">
  <button class="kt-btn" data-kt-dropdown-toggle="true">Show Dropdown</button>
  <div class="kt-dropdown max-w-56 p-3 text-sm" data-kt-dropdown-menu="true">
    <span data-kt-tooltip="true"
      ><span class="kt-link kt-link-underline">The Tailwind Dropdown</span>
      <div class="kt-tooltip" data-kt-tooltip-content="true">
        Here is a delightful tooltip!
      </div></span
    >
    <!-- -->component offers a sleek, user-friendly interface for presenting
    overlay content.
  </div>
</div>

Component API

Options

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

Option	Type	Default	Description
`data-kt-dropdown-zindex`	~~number~~	~~105~~	Defines the z-index of the dropdown, ensuring it layers correctly above or beneath other page elements.
`data-kt-dropdown-hover-timeout`

Selectors

This table details the custom classes and data attributes used by the dropdown component.

Name	Description
Data Attributes
`data-kt-dropdown="true"`	Automatically initializes Tailwind Dropdown instances on page load.
`data-kt-dropdown-toggle="true"`	Marks an element as the trigger for toggling the dropdown menu visibility.

Tailwind Modifiers

Custom modifiers to control the dropdown’s style and behavior with Tailwind classes.

Name	Description
`kt-dropdown-open:*`	A custom Tailwind variant activated when the dropdown is shown. It can be applied to the dropdown toggle, dropdown content, and its children, controlling their appearance and behavior in the open state.

Methods

Use KTDropdown component's API methods to programmatically control its behavior.

Method	Description
`new KTDropdown(element, options)`	Creates an object instance of KTDropdown class for the given DOM element and configuration `options` .
`show()`	Shows the subdropdown of the dropdown item associated with `itemElement` DOM element.
`hide()`	Hides the subdropdown of the dropdown item associated with DOM element.

const dropdownEl = document.querySelector('#my-dropdown');
const dropdown = KTDropdown.getInstance(dropdownEl);
 
dropdown.show();
dropdown.hide();

Utilities

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

Method	Description
`init()`	Automatically initializes KTDropdown object for all elements with the `data-kt-dropdown="true"` attribute on page load.
`createInstances()`	Allows to create KTDropdown instances for all elements that have been dynamically added to the DOM but haven't been activated yet.
`getInstance(element)`	Returns the KTDropdown object associated with the given DOM element element .

// Initialize all dropdowns
KTDropdown.init()
 
// Initialzie pending dropdowns
KTDropdown.createInstances();
 
// Get dropdown object
const dropdownEl = document.querySelector('#my-dropdown');
const dropdown = KTDropdown.getInstance(dropdownEl);

Events

KTDropdown 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 dropdown is shown.
`shown`	Triggers after a dropdown is fully displayed.
`hide`	Fires before a dropdown starts the hiding process.

const dropdownEl = document.querySelector('#my-dropdown');
const dropdown = KTDropdown.getInstance(dropdownEl);
 
dropdown.on('show', () => {
	console.log('show event');
});
 
dropdown.on('shown', () => {
	console.log('shown event');
});
 
dropdown.on('hide', (detail) => {
	detail.cancel = true;
	console.log('hide action canceled');
});

PreviouseDrawer NextImage Input

Tailwind Dropdown

Examples

Basic Usage

Arrow

Separator

Width

Scrollable

Dismiss

Permanent

Placement

Trigger

Offset

Navigation Menu

With Modal

With Tooltip

Component API

Options

Selectors

Tailwind Modifiers

Methods

Utilities

Events