Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA dropdown menu described by data: actions, checkable items, radio groups, labels, separators and nested submenus in one array.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when the menu is built at run time or comes from configuration or permissions: filter the array and the menu follows. It saves wiring ten nested components for a menu of ten entries.
Do not use it when a menu needs custom markup inside items; compose the dropdown-menu parts directly for that. Do not hide required actions in a menu.
It builds on dropdown-menu, which the CLI installs for you.
| Prop | Type | Default | Description |
|---|---|---|---|
entries | MenuEntry[] | - | item, checkbox, radio, sub, label or separator entries, each with a unique id. |
children | ReactElement | - | The trigger. |
align | "start" | "center" | "end" | start | Alignment to the trigger. |
| Prop | Type | Default | Description |
|---|---|---|---|
label, icon, shortcut | string, ReactNode, string | - | Content of the row. |
disabled, destructive | boolean | false | State and style. |
onSelect | () => void | - | Runs on selection; the menu closes. |
menuitem, menuitemcheckbox or menuitemradio with aria-checked; disabled items stay discoverable.prefers-reduced-motion.| Key | Action |
|---|---|
| Enter / Space / ArrowDown | opens the menu |
| ArrowDown / ArrowUp | move through items |
| ArrowRight | open a submenu, ArrowLeft: close it |
| Typeahead | jump to an item by its first letters |
| Escape | close and return focus to the trigger |
The component ships a Testing Library test (data-menu.test.tsx) that covers every entry type and its role, selecting, toggling checkbox and radio entries and submenu keyboard navigation.