Dropdown Menu
A menu of actions triggered by a button. Rises with overlay depth; items highlight on hover and keyboard navigation.
tsx
import { Button } from "@/registry/seam/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/registry/seam/ui/dropdown-menu"
export default function DropdownMenuDemo() {
return (
<DropdownMenu>
<DropdownMenuTrigger
render={<Button variant="outline">Open menu</Button>}
/>
<DropdownMenuContent>
<DropdownMenuLabel>My Account</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Team</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}bunx --bun @seamui/cli@latest add dropdown-menuNotes
- Full keyboard support — arrows, Home/End, typeahead, Escape — with
role="menu"semantics; Base UI handles positioning and collision. - Submenus animate from their own trigger origin, same as the root menu.
- Checkbox and radio items ship in the same file when a menu needs selectable state.
Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.