Browse components
Branched Menu
A trigger that grows curved branches out to its sub-actions, then pulls them back in when it closes.
Installation
npx shadcn@latest add @glint-ui/branched-menuFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/branched-menu.json
Usage
import { BranchedMenu } from "@/components/ui/branched-menu";
<BranchedMenu
items={[
{ label: "Photo", icon: <Camera /> },
{ label: "Note", icon: <FileText /> },
{ label: "Voice", icon: <Mic /> },
]}
onSelect={(item) => create(item.label)}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| radius | number | 130 | Branch length in px. |
| spread | number | 150 | Fan angle in degrees. |
| color | string | "#a3e635" | Branch stroke color. |
| label | string | "Create" | Accessible name of the trigger. |
| items | ReactNode | — | Array of { label, icon } sub-actions. |
| onSelect | ReactNode | — | Called with (item, index) when a sub-action is picked. |
| className | string | — | Extra classes for the root element. |