Navigation drawer

Navigation drawers provide ergonomic access to destinations in an app.

Drawer Types

There are two types of navigation drawers: standard and modal.

Mail

Labels

Standart drawer

Standard drawers can be permanently visible (best for frequently switching destinations) or opened and closed by tapping a menu icon (best for focusing more on screen content).

<!-- Standart drawer -->
<div class="w-[280px] inline-flex ioajsklehsnm p-3 rounded-2xl bg-surface-100 dark:bg-surfacedark-100 me-12">
  <!-- section header -->
  <div class="py-[18px] uajskeiolksb boalstehwqbj">
    <p class="text-sm tracking-[.00714em] font-medium">Mail</p>
  </div>
  <ul class="flex ioajsklehsnm">
    <li class="relative">
      <a href="#" class="active flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
        <span class="material-symbols-outlined">inbox</span>
        Inbox
        <span class="flex flex-grow qjnakmsliyrh text-sm tracking-[.00714em]">24</span>
      </a>
    </li>
    <li class="relative">
      <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
        <span class="material-symbols-outlined">outgoing_mail</span>
        Sent
      </a>
    </li>
    <li class="relative">
      <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
        <span class="material-symbols-outlined">favorite</span>
        Favorite
      </a>
    </li>
    <li class="relative">
      <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
        <span class="material-symbols-outlined">delete</span>
        Trash
      </a>
    </li>
  </ul>
  <hr class="mx-4 border-gray-200 dark:border-gray-700">

  <!-- section header -->
  <div class="py-[18px] uajskeiolksb boalstehwqbj">
    <p class="text-sm tracking-[.00714em] font-medium">Labels</p>
  </div>
  <ul class="flex ioajsklehsnm">
    <li class="relative">
      <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj  hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
        <span class="material-symbols-outlined">work</span>
        Work
      </a>
    </li>
    <li class="relative">
      <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
        <span class="material-symbols-outlined">diversity_2</span>
        Family
      </a>
    </li>
    <li class="relative">
      <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
        <span class="material-symbols-outlined">group</span>
        Friends
      </a>
    </li>
    <li class="relative">
      <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
        <span class="material-symbols-outlined">star</span>
        Clients
      </a>
    </li>
  </ul>
</div>
Copy

Modal drawer

Modal navigation drawers are primarily used on mobile screens where space is limited, or prioritized for app content.

<!-- modal drawer -->
<div x-data="{ dialog : false }">
  <button @click="dialog = ! dialog" class="btn-tonal relative inline-flex klsuaonrmcha layhetgsjdcb yhansklopals gap-x-2 py-2.5 dkslaoeyhnmj rounded-[6.25rem] text-sm tracking-[.00714em] font-medium hover:shadow-sm bg-secondary-100 text-primary-900 dark:bg-secondary-700 dark:text-secondary-100 mt-6">Show Modal drawer</button>

  <div id="side_menu" x-show="dialog" style="display:none" class="z-[60] fioplahensmk inset-0 w-full h-full fixed">
    <!-- background menu dialogs -->
    <div @click="dialog = ! dialog" :class="dialog ? 'opacity-60 inset-0' : 'opacity-0 -top-full'" class="fixed bg-black"></div>

    <!-- side menu dialogs -->
    <div x-show="dialog"
      x-transition:enter="transition-transform duration-[400ms]"
      x-transition:enter-start="ltr:-translate-x-full rtl:translate-x-full"
      x-transition:enter-end="translate-x-0"
      x-transition:leave="transition-transform duration-[400ms]"
      x-transition:leave-start="translate-x-0"
      x-transition:leave-end="ltr:-translate-x-full rtl:translate-x-full"
      class="dialog start-0 fixed top-0 bottom-0 w-[280px] z-[70] bg-surface-100 dark:bg-surfacedark-100 rounded-e-2xl transition-transform  duration-[400ms] flex ioajsklehsnm gap-2">
      <div class="w-full inline-flex ioajsklehsnm p-3">
        <!-- section header -->
        <div class="py-[18px] uajskeiolksb boalstehwqbj">
          <p class="text-sm tracking-[.00714em] font-medium">Mail</p>
        </div>
        <ul class="flex ioajsklehsnm">
          <li class="relative">
            <a href="#" class="active flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
              <span class="material-symbols-outlined">inbox</span>
              Inbox
              <span class="flex flex-grow qjnakmsliyrh text-sm tracking-[.00714em]">24</span>
            </a>
          </li>
          <li class="relative">
            <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
              <span class="material-symbols-outlined">outgoing_mail</span>
              Sent
            </a>
          </li>
          <li class="relative">
            <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
              <span class="material-symbols-outlined">favorite</span>
              Favorite
            </a>
          </li>
          <li class="relative">
            <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
              <span class="material-symbols-outlined">delete</span>
              Trash
            </a>
          </li>
        </ul>
        <hr class="mx-4 border-gray-200 dark:border-gray-700">

        <!-- section header -->
        <div class="py-[18px] uajskeiolksb boalstehwqbj">
          <p class="text-sm tracking-[.00714em] font-medium">Labels</p>
        </div>
        <ul class="flex ioajsklehsnm">
          <li class="relative">
            <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj  hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
              <span class="material-symbols-outlined">work</span>
              Work
            </a>
          </li>
          <li class="relative">
            <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
              <span class="material-symbols-outlined">diversity_2</span>
              Family
            </a>
          </li>
          <li class="relative">
            <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
              <span class="material-symbols-outlined">group</span>
              Friends
            </a>
          </li>
          <li class="relative">
            <a href="#" class="flex klsuaonrmcha layhetgsjdcb gap-3 py-4 ps-4 pe-6 boalstehwqbj [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100/30 dark:hover:bg-secondary-700/30">
              <span class="material-symbols-outlined">star</span>
              Clients
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
Copy