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⇧⌘P Billing⌘B Settings⌘S Keyboard shortcuts⌘K

Team

Message

More...

New Team⌘+T

GitHub Support API

Log out⇧⌘Q

Copied !

import {
	Dropdown,
	DropdownTrigger,
	DropdownContent
} from "$components/dropdown.component";

export function DefaultDropdownExample() {
	return (
		<Dropdown>
			<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"
				>
					<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 my-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
									x-on: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, DropdownContent } from "$components/dropdown.component";

export function HoverDropdownExample() {
    return (
			<Dropdown position="bottom" x-bind="hover">
				<a
					href="#_"
					x-ref="trigger"
					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"
					>
						<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.

Email link
Messages
Notes
Search the web
Find...
Find Next
Find Previous

Copied !

import {
	Dropdown,
	DropdownTrigger,
	DropdownContent
} from "$components/dropdown.component";

export function MenuBarDropdownExample() {
	return (
		<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="hover:rounded-md bg-white border border-transparent hover:border-slate-200 w-full flex items-center justify-center"
					x-bind:class="{ 'hover:rounded bg-white hover:bg-slate-200' : visible }"
				>
					<DropdownTrigger class="p-2 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="true"
						>
							<button
								x-on: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
								x-on: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
								x-on: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
								x-on: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="hover:rounded-md bg-white border border-transparent hover:border-slate-200 w-full flex items-center justify-center"
					x-bind:class="{ 'hover:rounded bg-white hover:bg-slate-200' : visible }"
				>
					<DropdownTrigger class="p-2 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="true"
						>
							<button
								x-on: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
								x-on: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
											x-on: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
											x-on: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
											x-on: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
											x-on: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
								x-on: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
								x-on: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
								x-on: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="hover:rounded-md bg-white border border-transparent hover:border-slate-200 w-full flex items-center justify-center"
					x-bind:class="{ 'hover:rounded bg-white hover:bg-slate-200' : visible }"
				>
					<DropdownTrigger class="p-2 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="true"
						>
							<button
								x-on: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
								x-on: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
								x-on: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
								x-on: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
								x-on: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
								x-on: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="hover:rounded-md bg-white border border-transparent hover:border-slate-200 w-full flex items-center justify-center"
					x-bind:class="{ 'hover:rounded bg-white hover:bg-slate-200' : visible }"
				>
					<DropdownTrigger class="p-2 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="true"
						>
							<div x-data="{ choice: 1 }" class="relative w-full">
								<button
									x-on: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
									x-on: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
									x-on: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
								x-on: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
								x-on: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.

Pines UIAn Alpine and Tailwind UI library
IntroductionRe-usable elements built using Alpine JS and Tailwind CSS.How to useCouldn't be easier. It's is as simple as copy, paste, and preview.ContributingFeel free to contribute your expertise. All these elements are open-source.
Tailwind CSSA utility first CSS framework for building amazing websites.LaravelThe perfect all-in-one framework for building amazing apps.Pines UIAn Alpine JS and Tailwind CSS UI library for awesome people.
ApineJSA framework without the complex setup or heavy dependencies.LivewireA seamless integration of server-side and client-side interactions.TailsThe ultimate Tailwind CSS design tool that helps you craft beautiful websites.

Copied !

import {
	Dropdown,
	DropdownTrigger,
	DropdownContent
} from "$components/dropdown.component";

export function MenuDropdownExample() {
	return (
		<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="#_"
									x-on: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="#_"
									x-on: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="#_"
									x-on: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="#_"
									x-on: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="#_"
									x-on: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="#_"
									x-on: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="#_"
									x-on: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="#_"
									x-on: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="#_"
									x-on: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>
	);
}