Home
Dashboard
⌘K
Jump to
MessagesMark all read
DF
Daniel Foster
Client schedule updated for…
AS
Rachel Morgan
Can we add a 7 AM yoga slot?
Dropdowns
Basic Dropdown
<div class="text-center">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-[var(--border)] bg-[var(--card)] text-dark dark:text-white hover:bg-[var(--card)] focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Dropdown<i data-lucide="chevron-down" class="size-4"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-[var(--card)] border border-[var(--border)] shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Another Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Other Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Seperate Action
</a>
</div>
</div>
</div>
</div>
Dropdown with Divider
<div class="text-center">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-[var(--border)] bg-[var(--card)] text-dark dark:text-white hover:bg-[var(--card)] focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Dropdown<i data-lucide="chevron-down" class="size-4"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-[var(--card)] border border-[var(--border)] shadow rounded-lg mt-2 z-1 divide-y divide-[var(--border)]" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Another Action
</a>
</div>
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Another Action
</a>
</div>
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Action
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Another Action
</a>
</div>
</div>
</div>
</div>
Dropdown with Icons
<div class="text-center">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-[var(--border)] bg-[var(--card)] text-dark dark:text-white hover:bg-[var(--card)] focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Dropdown<i data-lucide="chevron-down" class="size-4"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-[var(--card)] border border-[var(--border)] shadow rounded-lg mt-2 z-1" role="menu" aria-orientation="vertical">
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-default hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
<i class="icon-eye c-text me-2"></i>View Details
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
<i class="icon-pencil-line me-2"></i>Edit
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm text-default hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
<i class="icon-trash-2 c-text me-2"></i>Delete
</a>
</div>
</div>
</div>
</div>
Dropdown with Simple Header
<div class="text-center">
<div class="hs-dropdown [--placement:bottom-right] [--auto-close:inside] relative inline-flex">
<button type="button" class="hs-dropdown-toggle cursor-pointer py-1.75 px-2 inline-flex items-center gap-x-2 text-sm font-normal rounded-lg border border-[var(--border)] bg-[var(--card)] text-dark dark:text-white hover:bg-[var(--card)] focus:outline-hidden focus:white" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
Dropdown<i data-lucide="chevron-down" class="size-4"></i>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden min-w-50 bg-[var(--card)] border border-[var(--border)] shadow rounded-lg mt-2 z-1 divide-y divide-[var(--border)]" role="menu" aria-orientation="vertical">
<div class="py-3 px-6 text-start">
<p class="mb-1">Signed as</p>
<p class="font-semibold c-text">admin@example.com</p>
</div>
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Profile
</a>
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Settings
</a>
</div>
<div class="p-2 space-y-1">
<a class="flex items-center px-4 py-1.75 rounded-lg text-sm c-text hover:bg-primary/8 hover:text-primary focus:outline-hidden focus:bg-[var(--card)]" href="#">
Sign out
</a>
</div>
</div>
</div>
</div>