Command Palette
Search for a command to run...
Dropdown-menu
Displays a menu of actions or options triggered by a button.About DropdownMenu
A context menu that shows interactive items with full keyboard navigation. Supports submenus, checkboxes, radio items, labels, and separators.Installation
Import the DropdownMenu component from LSD:import { DropdownMenu } from '@nipsys/lsd'
export default function MyComponent() {
return <DropdownMenu />
}Usage
The simplest form of the component with default styling.Basic
Features
Additional features and capabilities of the component.Checkbox Items
Radio Items
Shortcuts
Submenus
Composition
DropdownMenu
├── DropdownMenuTrigger
└── DropdownMenuPortal
└── DropdownMenuContent
API Reference
Radix UI Documentation
DropdownMenu wraps Radix UI primitives
Accessibility
The component follows accessibility best practices for screen readers and keyboard navigation.Keyboard Navigation
Keyboard shortcuts and navigation
• Tab - Navigate to the menu trigger• Enter or Space - Open the menu or select focused item• Arrow Up/Down - Navigate between menu items• Arrow Right - Open submenu from trigger• Arrow Left - Close submenu• Escape - Close the menu• Home/End - Jump to first/last menu item• Letter keys - Typeahead to navigate to items
ARIA Attributes
Proper ARIA attributes for screen readers
• role="menu" identifies the component as a menu• aria-expanded indicates open/closed state on trigger• aria-controls links trigger to menu content• aria-haspopup="menu" announces menu functionality• aria-activedescendant tracks focused item• aria-orientation="vertical" for vertical menus• aria-disabled marks disabled items
Focus States
Visible focus indicators for keyboard users
• Focus moves to first menu item when menu opens. Focus returns to trigger when menu closes. Focus is trapped within the menu when open and wraps when navigating past first/last item.