A tree menu whose submenus branch out with connector lines that draw in one after another. Arrow keys, Enter and Escape work at every level.
npx shadcn@latest add https://hyperblur.dev/r/menu-branched.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/menu-branched.tsx.
import { BranchedMenu } from "@/components/hyperblur/menu-branched"
<BranchedMenu items={[{ id: "new", label: "New", children: [{ id: "file", label: "Blank file" }] }]} defaultExpanded={["new"]} onChange={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| items | BranchedMenuItem[] | sample menu | Menu nodes. Each has id, label and optionally hint, icon, disabled and children for the next level. |
| value | string | null | Controlled id of the selected leaf. Pair with onChange. | |
| defaultValue | string | null | null | Initially selected leaf id when uncontrolled. |
| onChange | (id: string, item: BranchedMenuItem, path: string[]) => void | Called when a leaf is chosen, with its item and the ids from the root down to it. | |
| defaultExpanded | string[] | [] | Ids of the branches that start open. |
| accent | string | "#2f7bff" | Color of the connector lines, selection and focus ring. |
| label | string | "Menu" | Accessible name of the tree. |