Drawer · Panel

Basic Usage

Click the below toggle button to reveal the default drawer example.

<div>
  <button class="mv-btn" data-mv-drawer-toggle="#drawer">Show Drawer</button>
  <div
    class="mv-drawer mv-drawer-start hidden w-56"
    data-mv-drawer="true"
    id="drawer"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
</div>

Directions

The following examples illustrate the various opening directions of the Tailwind Drawer.

<div class="flex items-center justify-center gap-4 p-16">
  <button class="mv-btn" data-mv-drawer-toggle="#drawer_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-move-right"
      aria-hidden="true"
    >
      <path d="M18 8L22 12L18 16"></path>
      <path d="M2 12H22"></path>
    </svg>
    Start</button
  ><button class="mv-btn" data-mv-drawer-toggle="#drawer_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-move-up"
      aria-hidden="true"
    >
      <path d="M8 6L12 2L16 6"></path>
      <path d="M12 2V22"></path>
    </svg>
    Top</button
  ><button class="mv-btn" data-mv-drawer-toggle="#drawer_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-move-down"
      aria-hidden="true"
    >
      <path d="M8 18L12 22L16 18"></path>
      <path d="M12 2V22"></path>
    </svg>
    Bottom</button
  ><button class="mv-btn" data-mv-drawer-toggle="#drawer_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-move-left"
      aria-hidden="true"
    >
      <path d="M6 8L2 12L6 16"></path>
      <path d="M2 12H22"></path>
    </svg>
    End
  </button>
  <div
    class="mv-drawer mv-drawer-start hidden w-56"
    data-mv-drawer="true"
    id="drawer_1"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
  <div
    class="mv-drawer mv-drawer-top hidden h-80"
    data-mv-drawer="true"
    id="drawer_2"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
  <div
    class="mv-drawer mv-drawer-bottom hidden h-80"
    data-mv-drawer="true"
    id="drawer_3"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
  <div
    class="mv-drawer mv-drawer-end hidden w-56"
    data-mv-drawer="true"
    id="drawer_4"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
</div>

Responsive

Transform an element into a Drawer in mobile mode by using the sm:[--mv-drawer-enable:false] responsive option class. Resize the screen to test the element in mobile mode.

<div>
  <button class="mv-btn sm:hidden" data-mv-drawer-toggle="#drawer_41">
    Show mobile drawer
  </button>
  <div
    class="w-72 sm:flex sm:flex-col sm:border sm:border-border sm:rounded-lg sm:[--mv-drawer-enable:false]"
    data-mv-drawer="true"
    data-mv-drawer-class="mv-drawer mv-drawer-start hidden"
    id="drawer_41"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
    </div>
    <div class="mv-drawer-content mv-scrollable">
      <div class="rounded-lg bg-muted w-full grow h-56"></div>
    </div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
</div>

Scrollable

Apply the mv-scrollable overflow-y-auto classes to the drawer body element to enable vertical scrolling within it using Tailwind Scrollable component.

<div>
  <button class="mv-btn" data-mv-drawer-toggle="#drawer_5">Show Drawer</button>
  <div
    class="mv-drawer mv-drawer-start hidden w-60"
    data-mv-drawer="true"
    id="drawer_5"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">
      <div class="rounded-lg bg-muted w-full grow h-[800px]"></div>
    </div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
</div>

Static Backdrop

Use the attribute data-mv-drawer-backdrop-static="true" to display a drawer with a static backdrop that prevents drawer closure on click on it.

<div>
  <button class="mv-btn" data-mv-drawer-toggle="#drawer_6">Show Drawer</button>
  <div
    class="mv-drawer mv-drawer-start hidden w-60"
    data-mv-drawer="true"
    data-mv-drawer-backdrop-static="true"
    id="drawer_6"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">
      <div class="rounded-lg bg-muted w-full grow h-[800px]"></div>
    </div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
</div>

No Backdrop

Use the attribute data-mv-drawer-backdrop="false" to display a drawer without the backdrop layer.

<div>
  <button class="mv-btn" data-mv-drawer-toggle="#drawer_7">Show Drawer</button>
  <div
    class="mv-drawer mv-drawer-start hidden w-56"
    data-mv-drawer="true"
    data-mv-drawer-backdrop="false"
    id="drawer_7"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
</div>

Toggle Drawers

Switch between multiple drawers for different actions.

<div>
  <button class="mv-btn" data-mv-drawer-toggle="#drawer_one">
    Show drawer
  </button>
  <div
    class="mv-drawer mv-drawer-start hidden w-56"
    data-mv-drawer="true"
    id="drawer_one"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">
      <button class="mv-btn" data-mv-drawer-toggle="#drawer_two">
        Show another drawer
      </button>
    </div>
  </div>
  <div
    class="mv-drawer mv-drawer-end hidden w-56"
    data-mv-drawer="true"
    id="drawer_two"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">
      <button class="mv-btn" data-mv-drawer-toggle="#drawer_one">
        Show first drawer
      </button>
    </div>
  </div>
</div>

Page Scroll

Apply the data-mv-drawer-disable-scroll="false" attribute to allow the page scrollbar to remain enabled.

<div class="h-[500px]">
  <button class="mv-btn" data-mv-drawer-toggle="#drawer8">Show Drawer</button>
  <div
    class="mv-drawer mv-drawer-start hidden w-56"
    data-mv-drawer="true"
    data-mv-drawer-disable-scroll="false"
    id="drawer8"
  >
    <div class="mv-drawer-header">
      <h3 class="mv-drawer-title">Drawer Title</h3>
      <button
        class="mv-drawer-close"
        aria-label="Close drawer"
        data-mv-drawer-dismiss="#alert"
      >
        <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-drawer-content mv-scrollable">Drawer content</div>
    <div class="mv-drawer-footer">Footer</div>
  </div>
</div>