Installation#
npmpnpmyarnbun
Examples#
Default#
Default
Sizes#
Available in multiple sizes.
Sizes
Colors#
Menu items support different color schemes.
Colors
With Groups#
Organize items into logical groups with labels.
Groups
Checkbox Items#
Checkbox Items
Radio Items#
Radio Items
Disabled Items#
Disabled Items
With Keyboard Shortcuts#
Keyboard Shortcuts
Context Menu Style#
Actions Menu
User Account Menu#
Account Menu
Anatomy#
Usage#
Import
import { Menu } from "@sugarcoat/ui-nxt";Usage
<Menu>
<Menu.Trigger>
<button>Open Menu</button>
</Menu.Trigger>
<Menu.Portal>
<Menu.Positioner>
<Menu.Popup>
<Menu.Item>Action 1</Menu.Item>
<Menu.Item>Action 2</Menu.Item>
<Menu.Separator />
<Menu.Item>Action 3</Menu.Item>
</Menu.Popup>
</Menu.Positioner>
</Menu.Portal>
</Menu>Props#
Menu (Root)#
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "xs" | "sm" | "md" | "lg" | "md" | Size of the menu items |
| color | "default" | "primary" | "accent" | "default" | Color scheme for menu items |
| shadow | "none" | "xs" | "sm" | "md" | "lg" | "md" | Box shadow elevation for the popup |
| open | boolean | - | Controlled open state |
| defaultOpen | boolean | - | Initial open state (uncontrolled) |
| onOpenChange | (open: boolean) => void | - | Callback when open state changes |
Menu.Item#
| Prop | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | - | Whether the item is disabled |
| onSelect | () => void | - | Callback when item is selected |
Menu.CheckboxItem#
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | - | Controlled checked state |
| onCheckedChange | (checked: boolean) => void | - | Callback when checked state changes |
Menu.RadioGroup / Menu.RadioItem#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Value of the selected radio item |
| onValueChange | (value: string) => void | - | Callback when selection changes |
Accessibility#
- Built on Base UI Menu for robust accessibility
- Supports keyboard navigation (Arrow keys, Enter, Escape)
- Proper ARIA roles for menu, menuitem, menuitemcheckbox, menuitemradio
- Focus management and trap when open
- Type-ahead search to jump to items