English
Italy
Spain
Arabic
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.
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>