# Shadcn Multi-Level Menu

> Multi-level collapsible menu

- Type: example, free and open source (MIT)
- Component: [Collapsible](https://reui.io/components/collapsible.md)
- Page: https://reui.io/components/collapsible/c-collapsible-9
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/collapsible.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/collapsible.md
- MCP: `get_example("c-collapsible-9")`
- Registry item: https://reui.io/r/styles/base-nova/c-collapsible-9.json
- Uses: Card, Collapsible, Item

## Best for

A 3 level navigation menu of icon rows where folders open in place and the chosen leaf row stays highlighted

## Agent notes

- Replace `navItems` with your routes; a leaf row only sets `selectedId`, so add the link or router call in `onSelect`
- Every row renders `Item` as a div, so Enter and Space never open a folder or pick a leaf; render rows as buttons or links for keyboard use

## When not to use

- A full app navigation column that collapses to icons and turns into a sheet on phones: use [Sidebar](https://reui.io/components/sidebar.md) (`get_component("sidebar")`)

## Install

```bash
npx shadcn@latest add @reui/c-collapsible-9
```

## About Shadcn Collapsible

### When to use

- Cards and panels that hold back secondary detail, such as order items, a usage breakdown or a profile
- Optional settings, advanced form fields and single help answers kept closed until asked for
- Nested navigation menus and file trees, built by placing one collapsible inside another

### When not to use

- Several stacked sections that open and close as one group, often one at a time: use [Accordion](https://reui.io/components/accordion.md) (`get_component("accordion")`)
- A large folder hierarchy that people move through and expand with arrow keys: use [Tree](https://reui.io/components/tree.md) (`get_component("tree")`)
- A complete account or workspace configuration page of grouped switch rows: use the [Settings blocks](https://reui.io/blocks/application/settings.md)

### Agent notes

- Base UI parts flag open state with `data-open` on root and panel and `data-panel-open` on the trigger, while Radix parts set a state attribute
- A closed `CollapsibleContent` renders none of its children in either twin, so that text is missing from the server HTML
- Base UI `CollapsibleTrigger` swaps its element through `render` and the Radix one through `asChild`; each reads only its own prop

Every ReUI item has a twin like this one; the index is https://reui.io/llms.txt. Agents with the ReUI MCP (https://reui.io/docs/mcp) get the same guidance from the getters named above.