Shadcn Collapsible Multi-Level Menu

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

• A full app navigation column that collapses to icons and turns into a sheet on phones: use the Sidebar component
• Several stacked sections that open and close as one group, often one at a time: use the Accordion component
• A large folder hierarchy that people move through and expand with arrow keys: use the Tree component
• A complete account or workspace configuration page of grouped switch rows: use the Settings blocks

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
• 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