nalarx-uiComponents
Menu
A dropdown of actions, links and single-choice options.
bunx shadcn@latest add @nalarx/menuUsage
<Menu>
<MenuTrigger render={<Button />}>Actions</MenuTrigger>
<MenuContent>
<MenuItem onClick={rename}>Rename</MenuItem>
<MenuLinkItem href={url}>Open in new tab</MenuLinkItem>
<MenuSeparator />
<MenuItem tone="danger" onClick={remove}>Delete</MenuItem>
</MenuContent>
</Menu>Items with icons, a disabled item, a link, a radio group under a label, and a danger item:
To pick a value, use Select. For a composer's model or agent switch, use Picker.
States
- Highlighted: the row under the pointer or keyboard washes
bg-hover; there is no separate hover style. - Disabled: 55% in
ink-4, skipped by the keyboard. - Danger: red text and a red highlight, because the item destroys something.
- Chosen radio: semibold with a check on the right.
- Placement: opens below the trigger, aligned to its start; flips and shifts to stay 8px inside the screen; never wider than the screen.
Keyboard
| Key | |
|---|---|
Enter, Space, ArrowDown on the trigger | Opens and highlights the first item (ArrowUp highlights the last). |
ArrowDown / ArrowUp | Moves the highlight, wrapping around. |
Home / End | First / last item. |
| Typing a letter | Jumps to the next item starting with it. |
Enter / Space | Activates the item and closes. |
Escape | Closes and returns focus to the trigger. |
Tab | Closes and moves focus on. |
Props
Parts are Base UI Menu parts. MenuContent adds align ("start"), side ("bottom") and sideOffset (4). MenuItem adds tone: "default" | "danger".
overlayPopup, overlayItem and overlayLabel are the class lists Select and Picker share; use them for any other floating list so it looks the same.
Replaces
Platform base/Menu.tsx; web base/Menu.tsx (unused) is deleted.