Dropdown Menu
A menu of actions or navigation anchored to a trigger, opened by click.
Install
pnpm dlx shadcn@latest add @namche/dropdown-menuUsage
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
<DropdownMenu>
<DropdownMenuTrigger render={<Button variant="outline">Account</Button>} />
<DropdownMenuContent>
<DropdownMenuLabel>[email protected]</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Workspace settings</DropdownMenuItem>
<DropdownMenuItem variant="destructive">Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>Built on Base UI's Menu primitive. DropdownMenuContent defaults to
align="start"/side="bottom" and matches its width to the trigger
(w-(--anchor-width)). It also exports DropdownMenuSub /
DropdownMenuSubTrigger / DropdownMenuSubContent for nested menus,
DropdownMenuCheckboxItem and DropdownMenuRadioGroup /
DropdownMenuRadioItem for toggleable state, and DropdownMenuShortcut for
a right-aligned key hint. This is also the primitive Menubar composes on
top of.