Components
Loading preview...
Accessible dropdown menu built on React Aria, from HeroUI v3. A trigger-anchored popover menu supporting plain actions, leading icons, descriptions, keyboard shortcuts (Kbd), grouped sections with headers and separators, disabled items, single and multiple selection with check indicators, a controlled selected state, a danger/destructive variant, and a custom avatar trigger. Full keyboard navigation, typeahead, and focus management. Compound API: Dropdown / Dropdown.Trigger / Dropdown.Popover / Dropdown.Menu / Dropdown.Item / Dropdown.Section / Dropdown.ItemIndicator + Label / Header / Description / Separator / Kbd / Avatar.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-dropdown"use client"
import { LogOut, Settings, Users } from "lucide-react"
import { Avatar, Dropdown, Label } from "@/components/ui/heroui-dropdown"
export default function Demo() {
return (
<div className="flex min-h-[360px] items-center justify-center p-6">
<Dropdown>
<Dropdown.Trigger className="rounded-full">
<Avatar>
<Avatar.Image
alt="Jane Doe"
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg"
/>
<Avatar.Fallback delayMs={600}>JD</Avatar.Fallback>
</Avatar>
</Dropdown.Trigger>
<Dropdown.Popover>
<div className="px-3 pt-3 pb-1">
<div className="flex items-center gap-2">
<Avatar size="sm">
<Avatar.Image
alt="Jane"
src="https://heroui-assets.nyc3.cdn.digitaloceanspaces.com/avatars/orange.jpg"
/>
<Avatar.Fallback delayMs={600}>JD</Avatar.Fallback>
</Avatar>
<div className="flex flex-col gap-0">
<p className="text-sm leading-5 font-medium">Jane Doe</p>
<p className="text-xs leading-none text-muted">jane@example.com</p>
</div>
</div>
</div>
<Dropdown.Menu>
<Dropdown.Item id="dashboard" textValue="Dashboard">
<Label>Dashboard</Label>
</Dropdown.Item>
<Dropdown.Item id="profile" textValue="Profile">
<Label>Profile</Label>
</Dropdown.Item>
<Dropdown.Item id="settings" textValue="Settings">
<div className="flex w-full items-center justify-between gap-2">
<Label>Settings</Label>
<Settings className="size-3.5 text-muted" />
</div>
</Dropdown.Item>
<Dropdown.Item id="new-project" textValue="New project">
<div className="flex w-full items-center justify-between gap-2">
<Label>Create Team</Label>
<Users className="size-3.5 text-muted" />
</div>
</Dropdown.Item>
<Dropdown.Item id="logout" textValue="Logout" variant="danger">
<div className="flex w-full items-center justify-between gap-2">
<Label>Log Out</Label>
<LogOut className="size-3.5 text-danger" />
</div>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown.Popover>
</Dropdown>
</div>
)
}