Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA dropdown whose levels open as submenus, with the whole chosen path shown on the button, the chosen leaf checked and the parents on the path marked. Use this when the hierarchy is shallow and a menu reads more naturally than columns.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for choosing a category, a destination or a unit of measure from a menu with two or three levels, where people expect the menu they know from desktop apps.
Do not use it when levels are many or lists are long. Use a cascader or a drill-down.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
tree | { id, label, children? }[] | - | The hierarchy. |
value | string[] | - | The chosen path of ids (controlled). |
defaultValue | string[] | [] | Initial path. |
onValueChange | (path: string[]) => void | - | Runs when a leaf is chosen. |
placeholder | string | Choose… | Button text while empty. |
Electronics › Audio › Headphones) and opens a Radix dropdown menu with the usual arrow-key and type-ahead behaviour., current path as hidden text.menuitemcheckbox items: the chosen one is checked.The pattern ships with a Testing Library test (submenu-path-dropdown.test.tsx) that covers opening submenus with the keyboard, choosing a leaf, the checked leaf and the path on the button.