Dropdown Menu
A menu that appears below a trigger element with keyboard navigation.
Import
import {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
} from "@retents/ui/dropdown-menu"Usage Guidelines
When to use
- For action menus triggered by a button, such as "More options", account menus, or kebab menus.
- When items are actions (edit, delete, share) rather than form selections.
- When you need labels, separators, and grouped items.
When NOT to use
- For form field value selection — use Select instead.
- For right-click menus — use ContextMenu instead.
- For searchable command lists — use Command instead.
Preview
Usage
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="outline">Open Menu</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Logout</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>