# Navigation drawer

Navigation drawers provide ergonomic access to destinations in an app.

## Drawer Types

There are two types of navigation drawers: standard and modal. You have to add `.show` classes to show navigation drawers modal.

Mail

- inbox Inbox 24
- outgoing_mail Sent
- favorite Favorite
- delete Trash

Labels

- work Work
- diversity_2 Family
- group Friends
- star Clients

## 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 flex-col p-3 rounded-2xl bg-surface-100 dark:bg-surfacedark-100 mr-12">
      <!-- section header -->
      <div class="py-[18px] px-4 rounded-full">
        <p class="text-sm tracking-[.00714em] font-medium">Mail</p>
      </div>
      <ul class="flex flex-col">
        <li class="relative">
          <a href="#" class="active flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
            <span class="material-symbols-outlined">inbox</span>
            Inbox
            <span class="flex flex-grow justify-end text-sm tracking-[.00714em]">24</span>
          </a>
        </li>
        <li class="relative">
          <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
            <span class="material-symbols-outlined">outgoing_mail</span>
            Sent
          </a>
        </li>
        <li class="relative">
          <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
            <span class="material-symbols-outlined">favorite</span>
            Favorite
          </a>
        </li>
        <li class="relative">
          <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-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] px-4 rounded-full">
        <p class="text-sm tracking-[.00714em] font-medium">Labels</p>
      </div>
      <ul class="flex flex-col">
        <li class="relative">
          <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full  hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
            <span class="material-symbols-outlined">work</span>
            Work
          </a>
        </li>
        <li class="relative">
          <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
            <span class="material-symbols-outlined">diversity_2</span>
            Family
          </a>
        </li>
        <li class="relative">
          <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
            <span class="material-symbols-outlined">group</span>
            Friends
          </a>
        </li>
        <li class="relative">
          <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
            <span class="material-symbols-outlined">star</span>
            Clients
          </a>
        </li>
      </ul>
    </div>

## Modal drawer

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

    <!-- trigger modal drawer -->
    <button data-type="dialogs" data-target="#side_menu">Show Drawers Modal</button>

    <!-- modal drawer -->
    <div id="side_menu" class="[&.show_.bg-dialog]:opacity-60 [&.show_.bg-dialog]:inset-0 [&.show_.dialog]:translate-x-0">
      <!-- background menu dialogs -->
      <div data-close="#side_menu" class="bg-dialog fixed z-[60] opacity-0 -top-full bg-black"></div>

      <!-- side menu dialogs -->
      <div class="dialog left-0 fixed top-0 bottom-0 w-[280px] z-[70] bg-surface-100 dark:bg-surfacedark-100 rounded-r-2xl transition-transform -translate-x-full duration-[400ms] flex flex-col gap-2">
        <div class="w-full inline-flex flex-col p-3">
          <!-- section header -->
          <div class="py-[18px] px-4 rounded-full">
            <p class="text-sm tracking-[.00714em] font-medium">Mail</p>
          </div>
          <ul class="flex flex-col">
            <li class="relative">
              <a href="#" class="active flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
                <span class="material-symbols-outlined">inbox</span>
                Inbox
                <span class="flex flex-grow justify-end text-sm tracking-[.00714em]">24</span>
              </a>
            </li>
            <li class="relative">
              <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
                <span class="material-symbols-outlined">outgoing_mail</span>
                Sent
              </a>
            </li>
            <li class="relative">
              <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
                <span class="material-symbols-outlined">favorite</span>
                Favorite
              </a>
            </li>
            <li class="relative">
              <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-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] px-4 rounded-full">
            <p class="text-sm tracking-[.00714em] font-medium">Labels</p>
          </div>
          <ul class="flex flex-col">
            <li class="relative">
              <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full  hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
                <span class="material-symbols-outlined">work</span>
                Work
              </a>
            </li>
            <li class="relative">
              <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
                <span class="material-symbols-outlined">diversity_2</span>
                Family
              </a>
            </li>
            <li class="relative">
              <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
                <span class="material-symbols-outlined">group</span>
                Friends
              </a>
            </li>
            <li class="relative">
              <a href="#" class="flex flex-row items-center gap-3 py-4 pl-4 pr-6 rounded-full [&.active]:text-gray-900 dark:[&.active]:text-gray-100 [&.active]:bg-secondary-100 dark:[&.active]:bg-secondary-700 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
                <span class="material-symbols-outlined">star</span>
                Clients
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts