ReUI
Components

Accordion Menu

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 https://reui.io/r/accordion-menu.json

Examples

Default

Loading

States

Loading
Loading

Multi-expand

Loading

Multi-level

Loading

Router

Loading

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:

PropTypeDefault
selectedValue string | string[] | undefined
matchPath (href: string) => booleanfalse
classNames object: AccordionMenuClassNames

Class Names Props - classNames

PropTypeDefault
group string
separator string
item string
sub string
subTrigger string
subContent string
indicator string

AccordionMenuGroup

This component is used to group menu items.

PropTypeDefault
className string

AccordionMenuLabel

This component is used to label menu groups and includes the following custom props:

PropTypeDefault
className string

AccordionMenuSeparator

This component is used to separate menu items and includes the following custom props:

PropTypeDefault
className string

AccordionMenuItem

This component is used to create individual menu items and includes the following custom props:

PropTypeDefault
variant enum default
className string

AccordionMenuSub

This component is used to create sub-menu items and includes the following custom props:

PropTypeDefault
className string

AccordionMenuSubTrigger

This component is used to trigger sub-menu items and includes the following custom props:

PropTypeDefault
className string

AccordionMenuSubContent

This component is used to display content for sub-menu content items and includes the following custom props:

PropTypeDefault
type enum single
collapsible booleantrue
defaultValue string | string[] | undefined
className string

AccordionMenuIndicator

This component is used to display indicators for menu items and includes the following custom props:

PropTypeDefault
className string