Dropdown · Panel

Arrow

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

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

Width

Use Tailwind Width classes to customize the dropdown width.

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

Scrollable

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

<div
  class="inline-flex"
  data-mv-dropdown="true"
  data-mv-dropdown-trigger="click"
>
  <button class="mv-btn" data-mv-dropdown-toggle="true">Show Dropdown</button>
  <div class="mv-dropdown max-w-56 text-sm" data-mv-dropdown-menu="true">
    <div class="mv-dropdown-header">Header</div>
    <div class="mv-dropdown-body mv-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="mv-dropdown-footer">Footer</div>
  </div>
</div>

Dismiss

Set the data-mv-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-mv-dropdown="true"
  data-mv-dropdown-trigger="click"
>
  <button class="mv-btn" data-mv-dropdown-toggle="true">Show Dropdown</button>
  <div
    class="mv-dropdown w-full max-w-56 p-3 text-sm"
    data-mv-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="mv-btn mv-btn-outline"
      data-mv-dropdown-dismiss="true"
    >
      Click to dismiss
    </button>
  </div>
</div>

Permanent

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

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

Placement

Use the data-mv-dropdown-placement option to control the opening direction of the Tailwind

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

Trigger

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

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

Offset

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

<div data-mv-dropdown="true" data-mv-dropdown-trigger="click">
  <button class="mv-btn" data-mv-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="mv-dropdown-menu w-52" data-mv-dropdown-menu="true">
    <ul class="mv-dropdown-menu-sub">
      <li>
        <a href="#" class="mv-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-6a2 2 0 0 1 2.582 0l7 6A2 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-mv-dropdown="true"
          data-mv-dropdown-trigger="hover"
          data-mv-dropdown-placement="right-start"
        >
          <button
            data-mv-dropdown-toggle="true"
            class="mv-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 mv-dropdown-menu-indicator"
              aria-hidden="true"
            >
              <path d="m9 18 6-6-6-6"></path>
            </svg>
          </button>
          <div data-mv-dropdown-menu="true" class="mv-dropdown-menu w-44">
            <ul class="mv-dropdown-menu-sub">
              <li>
                <a href="#" class="mv-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="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
                    ></path>
                    <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
                    <path d="M10 9H8"></path>
                    <path d="M16 13H8"></path>
                    <path d="M16 17H8"></path></svg
                  >All Projects</a
                >
              </li>
              <li>
                <div
                  data-mv-dropdown="true"
                  data-mv-dropdown-trigger="hover"
                  data-mv-dropdown-placement="right-start"
                >
                  <button
                    data-mv-dropdown-toggle="true"
                    class="mv-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"
                    >
                      <path d="M13 5h8"></path>
                      <path d="M13 12h8"></path>
                      <path d="M13 19h8"></path>
                      <path d="m3 17 2 2 4-4"></path>
                      <rect x="3" y="4" width="6" height="6" rx="1"></rect></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 mv-dropdown-menu-indicator"
                      aria-hidden="true"
                    >
                      <path d="m9 18 6-6-6-6"></path>
                    </svg>
                  </button>
                  <div
                    data-mv-dropdown-menu="true"
                    class="mv-dropdown-menu w-44"
                  >
                    <ul class="mv-dropdown-menu-sub">
                      <li>
                        <a href="#" class="mv-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.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344"
                            ></path>
                            <path d="m9 11 3 3L22 4"></path></svg
                          >Open Tasks</a
                        >
                      </li>
                      <li>
                        <a href="#" class="mv-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="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 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="mv-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.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344"
                    ></path>
                    <path d="m9 11 3 3L22 4"></path></svg
                  >New Project</a
                >
              </li>
            </ul>
          </div>
        </div>
      </li>
      <li>
        <div
          data-mv-dropdown="true"
          data-mv-dropdown-trigger="hover"
          data-mv-dropdown-placement="right-start"
        >
          <button
            data-mv-dropdown-toggle="true"
            class="mv-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 mv-dropdown-menu-indicator"
              aria-hidden="true"
            >
              <path d="m9 18 6-6-6-6"></path>
            </svg>
          </button>
          <div data-mv-dropdown-menu="true" class="mv-dropdown-menu w-44">
            <ul class="mv-dropdown-menu-sub">
              <li><a href="#" class="mv-dropdown-menu-link">Members</a></li>
              <li><a href="#" class="mv-dropdown-menu-link">Invite</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li>
        <a href="#" class="mv-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="mv-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 mv-badge mv-badge-primary mv-badge-sm mv-badge-circle"
            >New</span
          ></a
        >
      </li>
      <li>
        <a href="#" class="mv-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="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"
            ></path>
            <circle cx="12" cy="12" r="3"></circle></svg
          >Settings</a
        >
      </li>
    </ul>
  </div>
</div>

With Modal

Display dropdowns inside the Tailwind Modal component.

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

With Tooltip

Display Tailwind Tooltip components in dropdowns.

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

Basic Usage

Pendiente de documentar.

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