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.
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>
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>