Selectalternative
Use Select for form field selectionMenu
Dropdown menu for actions and commands. Supports submenus, check items, radio groups, and keyboard shortcuts.
Setup
import { Menu } from '@fragments-sdk/ui';Examples
Default
Basic dropdown menu
Loading preview...
With Shortcuts
Menu items with keyboard shortcuts
Loading preview...
With Groups
Menu with labeled groups
Loading preview...
With Checkboxes
Menu with toggleable checkbox options
Loading preview...
With Checked Items
Filter menu with check marks indicating active selections
Loading preview...
With Submenu
Menu with nested submenu for grouped secondary options
Loading preview...
Link Trigger
Use asChild with a non-button trigger element
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Menu trigger and content |
open | boolean | Not set | Controlled open state |
defaultOpen | boolean | false | Default open state (uncontrolled) |
onOpenChange | function | Not set | Called when open state changes |
modal | boolean | true | Whether menu is modal |
Usage Guidelines
When to use
- Overflow actions that dont fit in the toolbar
- Context menus (right-click)
- User account menus
- Grouped actions with separators
- Nested menus with submenus
When not to use
- Selecting from options (use Select)
- Navigation (use Tabs or navigation components)
- Form selection (use Select or RadioGroup)
Best practices
- Group related actions with Menu.Group
- Use separators to divide action categories
- Include keyboard shortcuts where applicable
- Use danger variant for destructive actions
- Keep menu items under 10-12 for usability
- Use checked prop on Menu.Item for simple selection state
- Use Menu.Submenu for nested secondary options
- Menu.Trigger supports asChild for links/router-link components (single valid element child required)
Accessibility
- Full keyboard navigation with arrow keys
- Type-ahead search for items
- Focus returns to trigger on close
- Proper ARIA menu roles
- ArrowRight opens submenus, ArrowLeft closes them