Dropdown
Overview
Dropdown is mostly used for listing items without taking any additional space in the main context. For instance, it’s common on an ecommerce shop to have in menu, a dropdown listing specific categories.
The dropdown can adapt its display position, i.e if it has to appears at the bottom but doesn’t have any space, it will come on top.
Here below are some examples of what you can achieve with dropdown.
Dropdown on Click
Default case is dropdown content displayed when clicking on trigger element.
My Account
Profile⇧⌘PBilling⌘BSettings⌘SKeyboard shortcuts⌘KTeam
Email
Message
More...
New Team⌘+T
GitHubSupportAPILog out⇧⌘QCopied !
---
import Dropdown from "$components/dropdown/Dropdown.astro";
import DropdownTrigger from "$components/dropdown/DropdownTrigger.astro";
import DropdownContent from "$components/dropdown/DropdownContent.astro";
---
<Dropdown position="top">
<DropdownTrigger
class="inline-flex items-center justify-center h-12 py-2 pl-3 pr-12 text-sm font-medium transition-colors bg-white border rounded-md text-neutral-700 hover:bg-neutral-100 active:bg-white focus:bg-white focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
>
<img
src="https://cdn.devdojo.com/images/may2023/adam.jpeg"
class="object-cover w-8 h-8 border rounded-full border-neutral-200"
/>
<span
class="flex flex-col items-start flex-shrink-0 h-full ml-2 leading-none translate-y-px"
>
<span>Adam Wathan</span>
<span class="text-xs font-light text-neutral-400">@adamwathan</span>
</span>
<svg
class="absolute right-0 w-5 h-5 mr-3"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
><path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"></path></svg
>
</DropdownTrigger>
<DropdownContent>
<div
class="p-1 w-64 mt-1 bg-white border rounded-md shadow-md border-neutral-200/70 text-neutral-700"
>
<div class="px-2 py-1.5 text-sm font-semibold">My Account</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<a
href="#_"
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle
cx="12"
cy="7"
r="4"></circle></svg
>
<span>Profile</span>
<span class="ml-auto text-xs tracking-widest opacity-60">⇧⌘P</span>
</a>
<a
href="#_"
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><rect width="20" height="14" x="2" y="5" rx="2"></rect><line
x1="2"
x2="22"
y1="10"
y2="10"></line></svg
>
<span>Billing</span><span
class="ml-auto text-xs tracking-widest opacity-60">⌘B</span
>
</a>
<a
href="#_"
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><path
d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
></path><circle cx="12" cy="12" r="3"></circle></svg
>
<span>Settings</span>
<span class="ml-auto text-xs tracking-widest opacity-60">⌘S</span>
</a>
<a
href="#_"
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><rect width="20" height="16" x="2" y="4" rx="2" ry="2"></rect><path
d="M6 8h.001"></path><path d="M10 8h.001"></path><path
d="M14 8h.001"></path><path d="M18 8h.001"></path><path
d="M8 12h.001"></path><path d="M12 12h.001"></path><path
d="M16 12h.001"></path><path d="M7 16h10"></path></svg
>
<span>Keyboard shortcuts</span>
<span class="ml-auto text-xs tracking-widest opacity-60">⌘K</span>
</a>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle
cx="9"
cy="7"
r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87"></path><path
d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg
>
<span>Team</span>
</div>
<Dropdown position="right">
<DropdownTrigger
class="relative flex select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm w-full"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle
cx="9"
cy="7"
r="4"></circle><line x1="19" x2="19" y1="8" y2="14"></line><line
x1="22"
x2="16"
y1="11"
y2="11"></line></svg
>
<span>Invite users</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 ml-auto"
><polyline points="9 18 15 12 9 6"></polyline></svg
>
</DropdownTrigger>
<DropdownContent>
<div
class="z-50 min-w-[8rem] rounded-md border bg-white p-1 shadow-md w-40"
>
<div
x-bind="closer"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
class="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><rect width="20" height="16" x="2" y="4" rx="2"></rect><path
d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg
>
<span>Email</span>
</div>
<div
x-bind="closer"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
class="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><path
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
></path></svg
>
<span>Message</span>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div
@click="dropdownOpen=false"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
class="w-4 h-4 mr-2"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
><circle cx="12" cy="12" r="10"></circle><line
x1="12"
x2="12"
y1="8"
y2="16"></line><line x1="8" x2="16" y1="12" y2="12"
></line></svg
>
<span>More...</span>
</div>
</div>
</DropdownContent>
</Dropdown>
<div
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><line x1="12" x2="12" y1="5" y2="19"></line><line
x1="5"
x2="19"
y1="12"
y2="12"></line></svg
>
<span>New Team</span>
<span class="ml-auto text-xs tracking-widest opacity-60">⌘+T</span>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<a
href="#_"
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><path
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg
>
<span>GitHub</span>
</a>
<a
href="#_"
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><circle cx="12" cy="12" r="10"></circle><circle cx="12" cy="12" r="4"
></circle><line x1="4.93" x2="9.17" y1="4.93" y2="9.17"></line><line
x1="14.83"
x2="19.07"
y1="14.83"
y2="19.07"></line><line x1="14.83" x2="19.07" y1="9.17" y2="4.93"
></line><line x1="14.83" x2="18.36" y1="9.17" y2="5.64"></line><line
x1="4.93"
x2="9.17"
y1="19.07"
y2="14.83"></line></svg
>
<span>Support</span>
</a>
<a
href="#_"
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
data-disabled
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
></path></svg
>
<span>API</span>
</a>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<a
href="#_"
class="relative flex cursor-default select-none hover:bg-neutral-100 items-center rounded px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 mr-2"
><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline
points="16 17 21 12 16 7"></polyline><line
x1="21"
x2="9"
y1="12"
y2="12"></line></svg
>
<span>Log out</span>
<span class="ml-auto text-xs tracking-widest opacity-60">⇧⌘Q</span>
</a>
</div>
</DropdownContent>
</Dropdown>
Dropdown on Hover
Triggering dropdown on hover is also possible.
@thedevdojo
@thedevdojo
The creative platform for developers. Community, tools, products, and more
Joined June 2020
Copied !
---
import Dropdown from "$components/dropdown/Dropdown.astro";
import DropdownContent from "$components/dropdown/DropdownContent.astro";
---
<Dropdown position="bottom" x-bind="hover">
<a
href="#_"
class="flex items-center justify-center h-12 py-2 px-4 text-sm font-medium transition-colors bg-white group border rounded-md text-neutral-700 hover:bg-neutral-100 hover:underline active:bg-white focus:bg-white focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
>@thedevdojo</a
>
<DropdownContent class="w-[365px] max-w-lg -translate-x-1/2 left-1/2">
<div
x-bind="shower"
class="w-[full] h-auto bg-white space-x-3 p-5 flex items-start rounded-md shadow-sm border border-neutral-200/70"
x-transition
>
<img
src="https://cdn.devdojo.com/users/June2022/devdojo.jpg"
alt="devdojo image"
class="rounded-full w-14 h-14"
/>
<div class="relative">
<p class="mb-1 font-bold">@thedevdojo</p>
<p class="mb-1 text-sm text-gray-600">
The creative platform for developers. Community, tools, products, and
more
</p>
<p class="flex items-center space-x-1 text-xs text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-5 h-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5m-9-6h.008v.008H12v-.008zM12 15h.008v.008H12V15zm0 2.25h.008v.008H12v-.008zM9.75 15h.008v.008H9.75V15zm0 2.25h.008v.008H9.75v-.008zM7.5 15h.008v.008H7.5V15zm0 2.25h.008v.008H7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0 2.25h.008v.008h-.008V15zm0 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008H16.5v-.008zm0 2.25h.008v.008H16.5V15z"
></path>
</svg>
<span>Joined June 2020</span>
</p>
</div>
</div>
</DropdownContent>
</Dropdown>
Dropdown Menu Bar Example
A practical case. Here, each list item is a dropdown. Notice that you can have nested dropdowns.
- Search the webFind...Find NextFind Previous
Copied !
---
import Dropdown from "$components/dropdown/Dropdown.astro";
import DropdownContent from "$components/dropdown/DropdownContent.astro";
import DropdownTrigger from "$components/dropdown/DropdownTrigger.astro";
---
<ul
class="flex items-center bg-white justify-evenly flex-1 p-2 gap-x-2 list-none border rounded-md text-neutral-700 group border-neutral-200/80"
>
<li class="grow flex items-center justify-center">
<Dropdown
class="p-2 hover:rounded-md bg-white border border-transparent hover:border-slate-200 w-full flex items-center justify-center"
:class="{ 'hover:rounded bg-white hover:bg-slate-200' : visible }"
>
<DropdownTrigger class="flex items-center justify-center w-full">
<span>File</span>
</DropdownTrigger>
<DropdownContent>
<div
class="text-neutral-800 rounded-md border border-neutral-200/70 bg-white text-sm p-1 shadow-md w-64"
x-cloak
>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>New Tab</span>
<span
class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600"
>⌘T</span
>
</button>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>New Window</span>
<span
class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600"
>⌘N</span
>
</button>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
data-disabled
>
<span>New Incognito Window</span>
</button>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<Dropdown position="right">
<DropdownTrigger
class="flex cursor-default select-none items-center rounded px-2 hover:bg-neutral-100 py-1.5 outline-none w-full"
>
<span>Share</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 ml-auto"
><polyline points="9 18 15 12 9 6"></polyline></svg
>
</DropdownTrigger>
<DropdownContent
class="absolute top-0 right-0 invisible mr-1 duration-200 ease-out translate-x-full opacity-0 group-hover:mr-0 group-hover:visible group-hover:opacity-100"
>
<div
class="z-50 min-w-[8rem] overflow-hidden rounded-md border bg-white p-1 shadow-md animate-in slide-in-from-left-1 w-32"
>
<div
x-bind="closer"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
Email link
</div>
<div
x-bind="closer"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
Messages
</div>
<div
x-bind="closer"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
Notes
</div>
</div>
</DropdownContent>
</Dropdown>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Print</span>
<span
class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600"
>⌘P</span
>
</button>
</div>
</DropdownContent>
</Dropdown>
</li>
<li class="grow flex items-center justify-center">
<Dropdown
position="right"
class="p-2 hover:rounded-md bg-white border border-transparent hover:border-slate-200 w-full flex items-center justify-center"
:class="{ 'hover:rounded bg-white hover:bg-slate-200' : visible }"
>
<DropdownTrigger class="flex items-center justify-center w-full">
<span>Edit</span>
</DropdownTrigger>
<DropdownContent>
<div
class="text-neutral-800 rounded-md border border-neutral-200/70 bg-white text-sm p-1 shadow-md w-64"
x-cloak
>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Undo</span>
<span
class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600"
>⌘Z</span
>
</button>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Redo</span>
<span
class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600"
>⇧⌘Z</span
>
</button>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<Dropdown position="left" class="relative w-full group">
<DropdownTrigger
class="flex cursor-default select-none items-center rounded px-2 hover:bg-neutral-100 py-1.5 outline-none w-full"
>
<span>Find</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4 ml-auto"
><polyline points="9 18 15 12 9 6"></polyline></svg
>
</DropdownTrigger>
<DropdownContent>
<div
class="min-w-[8rem] rounded-md border bg-white p-1 shadow-md w-32"
>
<div
@click="hide()"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
Search the web
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<div
@click="hide()"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
Find...
</div>
<div
@click="hide()"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
Find Next
</div>
<div
@click="hide()"
class="relative flex cursor-default select-none items-center rounded px-2 py-1.5 hover:bg-neutral-100 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
>
Find Previous
</div>
</div>
</DropdownContent>
</Dropdown>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Cut</span>
</button>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Copy</span>
</button>
<button
@click="hide()"
class="relative flex justify-between w-full cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Paste</span>
</button>
</div>
</DropdownContent>
</Dropdown>
</li>
<li class="grow flex items-center justify-center">
<Dropdown
position="left"
class="p-2 hover:rounded-md bg-white border border-transparent hover:border-slate-200 w-full flex items-center justify-center"
:class="{ 'hover:rounded bg-white hover:bg-slate-200' : visible }"
>
<DropdownTrigger class="flex items-center justify-center w-full">
<span>View</span>
</DropdownTrigger>
<DropdownContent>
<div
class="text-neutral-800 rounded-md border border-neutral-200/70 bg-white text-sm p-1 shadow-md w-64"
x-cloak
>
<button
@click="alwaysShowBookmarks=!alwaysShowBookmarks;"
x-data="{ alwaysShowBookmarks: false }"
class="relative flex justify-between w-full pl-8 cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span
x-show="alwaysShowBookmarks"
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4"
><polyline points="20 6 9 17 4 12"></polyline></svg
></span
>
<span>Always Show Bookmarks Bar</span>
</button>
<button
@click="alwaysShowFullURL=!alwaysShowFullURL"
x-data="{ alwaysShowFullURL: true }"
class="relative flex justify-between w-full pl-8 cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span
x-show="alwaysShowFullURL"
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-4 h-4"
><polyline points="20 6 9 17 4 12"></polyline></svg
></span
>
<span>Always Show Full URLs</span>
</button>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<button
@click="hide()"
class="relative flex justify-between w-full pl-8 cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Reload</span>
<span
class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600"
>⌘R</span
>
</button>
<button
@click="hide()"
class="relative flex justify-between w-full pl-8 cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
data-disabled
>
<span>Force Reload</span>
<span
class="ml-auto text-xs tracking-widest text-neutral-400 group-hover:text-neutral-600"
>⇧⌘R</span
>
</button>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<button
@click="hide()"
class="relative flex justify-between w-full pl-8 cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Toggle Fullscreen</span>
</button>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<button
@click="hide()"
class="relative flex justify-between w-full pl-8 cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Hide Sidebar</span>
</button>
</div>
</DropdownContent>
</Dropdown>
</li>
<li class="grow flex items-center justify-center">
<Dropdown
position="top"
class="p-2 hover:rounded-md bg-white border border-transparent hover:border-slate-200 w-full flex items-center justify-center"
:class="{ 'hover:rounded bg-white hover:bg-slate-200' : visible }"
>
<DropdownTrigger class="flex items-center justify-center w-full">
<span>Profiles</span>
</DropdownTrigger>
<DropdownContent>
<div
class="text-neutral-800 rounded-md border border-neutral-200/70 bg-white text-sm p-1 shadow-md w-64"
x-cloak
>
<div x-data="{ choice: 1 }" class="relative w-full">
<button
@click="choice = 1"
class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50"
>
<span
x-show="choice === 1"
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-2 h-2 fill-current"
><circle cx="12" cy="12" r="10"></circle></svg
></span
>
<span>Taylor Otwell</span>
</button>
<button
@click="choice = 2"
class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50"
>
<span
x-show="choice === 2"
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-2 h-2 fill-current"
><circle cx="12" cy="12" r="10"></circle></svg
></span
>
<span>Adam Wathan</span>
</button>
<button
@click="choice = 3"
class="relative w-full flex cursor-default select-none items-center rounded py-1.5 pl-8 pr-2 hover:bg-neutral-100 outline-none data-[disabled]:opacity-50"
>
<span
x-show="choice === 3"
class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="w-2 h-2 fill-current"
><circle cx="12" cy="12" r="10"></circle></svg
></span
>
<span>Caleb Porzio</span>
</button>
</div>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<button
@click="hide()"
class="relative flex justify-between w-full pl-8 cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Edit...</span>
</button>
<div class="h-px my-1 -mx-1 bg-neutral-200"></div>
<button
@click="hide()"
class="relative flex justify-between w-full pl-8 cursor-default select-none group items-center rounded px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 outline-none data-[disabled]:opacity-50 data-[disabled]:pointer-events-none"
>
<span>Add Profile...</span>
</button>
</div>
</DropdownContent>
</Dropdown>
</li>
</ul>
Dropdown Menu Hover Example
In this example, dropdown is triggered on hover on each list item.
P.S: Notice that as component is at page bottom, dropdown will appear on top.
Copied !
---
import Dropdown from "$components/dropdown/Dropdown.astro";
import DropdownContent from "$components/dropdown/DropdownContent.astro";
import DropdownTrigger from "$components/dropdown/DropdownTrigger.astro";
---
<ul
class="flex items-center bg-white justify-center flex-1 p-2 gap-x-2 list-none border rounded-md text-neutral-700 group border-neutral-200/80"
>
<li
class="rounded bg-white border hover:bg-slate-200 hover:border-transparent"
>
<Dropdown x-bind="hover" class="p-2">
<DropdownTrigger>
<span>Getting started</span>
</DropdownTrigger>
<DropdownContent class="bg-white text-slate-800">
<div
class="flex items-stretch justify-center w-full max-w-2xl p-6 gap-x-3 border rounded-lg"
>
<div
class="flex-shrink-0 w-48 rounded pt-28 pb-7 bg-gradient-to-br from-neutral-800 to-black"
>
<div class="relative px-7 space-y-1.5 text-white">
<svg
class="block w-auto h-9"
viewBox="0 0 180 180"
fill="none"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M67.683 89.217h44.634l30.9 53.218H36.783l30.9-53.218Z"
fill="currentColor"></path><path
fill-rule="evenodd"
clip-rule="evenodd"
d="M77.478 120.522h21.913v46.956H77.478v-46.956Zm-34.434-29.74 45.59-78.26 46.757 78.26H43.044Z"
fill="currentColor"></path></svg
>
<span class="block font-bold">Pines UI</span>
<span class="block text-sm opacity-60"
>An Alpine and Tailwind UI library</span
>
</div>
</div>
<div class="w-72">
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">Introduction</span
>
<span class="block font-light leading-5 opacity-50"
>Re-usable elements built using Alpine JS and Tailwind CSS.</span
>
</a>
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">How to use</span>
<span class="block leading-5 opacity-50"
>Couldn't be easier. It's is as simple as copy, paste, and
preview.</span
>
</a>
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">Contributing</span
>
<span class="block leading-5 opacity-50"
>Feel free to contribute your expertise. All these elements are
open-source.</span
>
</a>
</div>
</div>
</DropdownContent>
</Dropdown>
</li>
<li
class="rounded bg-white border hover:bg-slate-200 hover:border-transparent"
>
<Dropdown x-bind="hover" class="p-2">
<DropdownTrigger>
<span>Learn More</span>
</DropdownTrigger>
<DropdownContent class="bg-white text-slate-800">
<div
class="flex items-stretch justify-center w-full p-6 border rounded-lg"
>
<div class="w-72">
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">Tailwind CSS</span
>
<span class="block font-light leading-5 opacity-50"
>A utility first CSS framework for building amazing websites.</span
>
</a>
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">Laravel</span>
<span class="block font-light leading-5 opacity-50"
>The perfect all-in-one framework for building amazing apps.</span
>
</a>
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">Pines UI</span>
<span class="block leading-5 opacity-50"
>An Alpine JS and Tailwind CSS UI library for awesome people.
</span>
</a>
</div>
<div class="w-72">
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">ApineJS</span>
<span class="block font-light leading-5 opacity-50"
>A framework without the complex setup or heavy dependencies.</span
>
</a>
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">Livewire</span>
<span class="block leading-5 opacity-50"
>A seamless integration of server-side and client-side
interactions.</span
>
</a>
<a
href="#_"
@click=""
class="block px-3.5 py-3 text-sm rounded hover:bg-neutral-100"
>
<span class="block mb-1 font-medium text-black">Tails</span>
<span class="block leading-5 opacity-50"
>The ultimate Tailwind CSS design tool that helps you craft
beautiful websites.</span
>
</a>
</div>
</div>
</DropdownContent>
</Dropdown>
</li>
</ul>