DropdownMenu
NavigationStable
Dropdown menu for actions and navigation with full keyboard support, submenus, checkboxes, and radio groups.
Quick Import
import { DropdownMenu } from "@cohere-ai/waypoint-ui/dropdown-menu";Live Preview
Loading DropdownMenu...
Props
| Name | Type | Default | Description |
|---|---|---|---|
sideOffset (DropdownMenuContent) | number | 4 | Distance from trigger |
container (DropdownMenuContent) | HTMLElement | - | Portal container |
inset (DropdownMenuItem) | boolean | false | Adds left padding to align with items that have icons |
variant (DropdownMenuItem) | 'default' | 'destructive' | 'default' | Visual style |
Examples
Basic Dropdown Menu
Dropdown with label, separator, and destructive item
1 import { 2 DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, 3 DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, 4 } from '@cohere-ai/waypoint-ui/dropdown-menu'; 5 6 <DropdownMenu> 7 <DropdownMenuTrigger asChild> 8 <Button variant="outline">Options</Button> 9 </DropdownMenuTrigger> 10 <DropdownMenuContent> 11 <DropdownMenuLabel>My Account</DropdownMenuLabel> 12 <DropdownMenuSeparator /> 13 <DropdownMenuItem>Profile</DropdownMenuItem> 14 <DropdownMenuItem>Settings</DropdownMenuItem> 15 <DropdownMenuSeparator /> 16 <DropdownMenuItem variant="destructive">Sign out</DropdownMenuItem> 17 </DropdownMenuContent> 18 </DropdownMenu>
Additional Resources
Accessibility
WCAG AA
Keyboard Navigation
Arrow keys navigate items. Enter activates. Escape closes.
Note: RTL supported.
Found an Issue?
If you've encountered a bug or have feedback about the DropdownMenu component, please report it to our team. Your feedback helps us improve Waypoint.
Available for all users • Issue will be created in Linear
Was this page helpful?
Your feedback helps us improve our documentation.
Need Help?
Check out the Whitelabeling Playground to explore customization options or visit the Developer Guide for integration help.