Basic Dropdown
Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.
<!-- First -->
<div
x-data="usePopper({placement:'bottom-start',offset:4})"
@click.outside="isShowPopper && (isShowPopper = false)"
class="inline-flex"
>
<button
class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
<span>Dropdown</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 transition-transform duration-200"
:class="isShowPopper && 'rotate-180'"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Action</a
>
</li>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Another Action</a
>
</li>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Separated Link</a
>
</li>
</ul>
</div>
</div>
</div>
<!-- Second -->
<div
x-data="usePopper({placement:'bottom-start',offset:4})"
@click.outside="isShowPopper && (isShowPopper = false)"
class="inline-flex"
>
<button
class="btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
<span>Dropdown</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 transition-transform duration-200"
:class="isShowPopper && 'rotate-180'"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Action</a
>
</li>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Another Action</a
>
</li>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Separated Link</a
>
</li>
</ul>
</div>
</div>
</div>
<!-- Third -->
<div
x-data="usePopper({placement:'bottom-end',offset:4})"
@click.outside="isShowPopper && (isShowPopper = false)"
class="inline-flex"
>
<button
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Action</a
>
</li>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Another Action</a
>
</li>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Separated Link</a
>
</li>
</ul>
</div>
</div>
</div>
<!-- Fourth -->
<div
x-data="usePopper({placement:'bottom-end',offset:4})"
@click.outside="isShowPopper && (isShowPopper = false)"
class="inline-flex"
>
<button
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
class="btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
></path>
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Action</a
>
</li>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Another Action</a
>
</li>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a
href="#"
class="flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Separated Link</a
>
</li>
</ul>
</div>
</div>
</div>
Primary Actions
Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.
<div
x-data="usePopper({placement:'bottom-start',offset:4})"
@click.outside="isShowPopper && (isShowPopper = false)"
class="inline-flex"
>
<button
class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
<span>Dropdown</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 transition-transform duration-200"
:class="isShowPopper && 'rotate-180'"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
>Action</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
>Another Action</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
>Something Else</a
>
</li>
</ul>
<div class="my-1 h-px bg-slate-150 dark:bg-navy-500"></div>
<ul>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
>Separated Link</a
>
</li>
</ul>
</div>
</div>
</div>
Dropdown Icons
Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.
<div
x-data="usePopper({placement:'bottom-start',offset:4})"
@click.outside="isShowPopper && (isShowPopper = false)"
class="inline-flex"
>
<button
class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
<span>Dropdown</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 transition-transform duration-200"
:class="isShowPopper && 'rotate-180'"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href="#"
class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="mt-px h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
<span> View</span></a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
/>
</svg>
<span> Edit</span></a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
<span> Update</span></a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
<span> Delete item</span></a
>
</li>
</ul>
</div>
</div>
</div>
Scrolled Dropdown
Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.
<div
x-data="usePopper({placement:'bottom-start',offset:4})"
@click.outside="isShowPopper && (isShowPopper = false)"
class="inline-flex"
>
<button
class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
<span>Dropdown</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 transition-transform duration-200"
:class="isShowPopper && 'rotate-180'"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box h-36 overflow-y-auto rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-600 dark:bg-navy-700"
>
<ul>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Action</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Another Action</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
<li>
<a
href="#"
class="flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>Something else</a
>
</li>
</ul>
</div>
</div>
</div>
HTML Content
Dropdowns are lightweight context menus for housing navigation and actions. Check out code for detail of usage.
<div
x-data="usePopper({placement:'bottom-start',offset:4})"
@click.outside="isShowPopper && (isShowPopper = false)"
class="inline-flex"
>
<button
class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref="popperRef"
@click="isShowPopper = !isShowPopper"
>
<span>Dropdown</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4 w-4 transition-transform duration-200"
:class="isShowPopper && 'rotate-180'"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19 9l-7 7-7-7"
/>
</svg>
</button>
<div x-ref="popperRoot" class="popper-root" :class="isShowPopper && 'show'">
<div
class="popper-box w-72 rounded-md border border-slate-150 bg-white dark:border-navy-600 dark:bg-navy-700"
>
<h3
class="px-4 py-3 font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Only Selected People
</h3>
<label class="relative flex">
<input
type="text"
class="form-input peer w-full border-y border-slate-150 bg-transparent px-4 py-2 pl-9 text-xs+ placeholder:text-slate-400/70 dark:border-navy-600"
placeholder="Type username..."
/>
<div
class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-4.5 w-4.5 transition-colors duration-200"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
d="M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"
></path>
</svg>
</div>
</label>
<ul class="my-2">
<li>
<a
href="#"
class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div>
<p class="text-slate-700 line-clamp-1 dark:text-navy-100">
Simon Tods
</p>
<p class="text-xs text-slate-500 dark:text-navy-300">
Web Developer
</p>
</div>
</a>
</li>
<li>
<a
href="#"
class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div class="avatar h-10 w-10">
<div
class="is-initial rounded-full border border-success/30 bg-success/10 uppercase text-success"
>
jd
</div>
</div>
<div>
<p class="text-slate-700 line-clamp-1 dark:text-navy-100">
John Doe
</p>
<p class="text-xs text-slate-500 dark:text-navy-300">
Web Developer
</p>
</div>
</a>
</li>
<li>
<a
href="#"
class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div class="avatar h-10 w-10">
<div
class="is-initial rounded-full bg-warning uppercase text-white"
>
KG
</div>
</div>
<div>
<p class="text-slate-700 line-clamp-1 dark:text-navy-100">
Konnor Guzman
</p>
<p class="text-xs text-slate-500 dark:text-navy-300">
Frontend Developer
</p>
</div>
</a>
</li>
<li>
<a
href="#"
class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div>
<p class="text-slate-700 line-clamp-1 dark:text-navy-100">
Samantha Shelton
</p>
<p class="text-xs text-slate-500 dark:text-navy-300">
Web Developer
</p>
</div>
</a>
</li>
<li>
<a
href="#"
class="flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div class="avatar h-10 w-10">
<img
class="rounded-full"
src="images/200x200.png"
alt="avatar"
/>
</div>
<div>
<p class="text-slate-700 line-clamp-1 dark:text-navy-100">
Derrick Simmons
</p>
<p class="text-xs text-slate-500 dark:text-navy-300">
UI/UX Designer
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>