Accordion Menu (Radix UI)
A flexible accordion menu that supports multi-level navigation and integrates with your router to manage active states based on the current route.
Installation
pnpm dlx shadcn@latest add @toui/accordion-menu
Examples
States
Sub-menu
Multi-expand
Multi-level
Router
API Reference
This component is built using Radix UI Accordion primitives. For detailed information please visit the full API reference.
AccordionMenu
This component provides the context for the accordion menu and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
selectedValue | ||
matchPath | ||
classNames |
Class Names Props - classNames
| Prop | Type | Default |
|---|---|---|
group | ||
separator | ||
item | ||
sub | ||
subTrigger | ||
subContent | ||
indicator |
AccordionMenuGroup
This component is used to group menu items.
| Prop | Type | Default |
|---|---|---|
className |
AccordionMenuLabel
This component is used to label menu groups and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
AccordionMenuSeparator
This component is used to separate menu items and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
AccordionMenuItem
This component is used to create individual menu items and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
variant |
AccordionMenuIndicator
This component is used to display indicators for menu items and includes the following custom props:
| Prop | Type | Default |
|---|---|---|
className |
Credits
- Built with Radix UI Accordion.