Navigation

Nav

Multi-level navigation tree with collapsible groups, active-route styling, an accordion mode, and a collapsed icon rail.

Example

Prop	Type	Default	Description
`items`	`NavItemData[]`	—	{ key, label, href?, icon?, badge?, children?, isDisabled?, isSection? }.
`aria-label`	`string`	—	Required.

items

NavItemData[]

Default: —

{ key, label, href?, icon?, badge?, children?, isDisabled?, isSection? }.

aria-label

string

Default: —

Required.

Prop	Type	Default	Description
`selectedKey`	`string`	—	Which leaf is the current page.
`isItemActive`	`(item) => boolean`	—	Custom active check (wins over selectedKey).
`onItemSelect`	`(item) => void`	—	Fired on leaf / link activation.
`expandedKeys / defaultExpandedKeys / onExpandedChange`	`Iterable<string> / …`	—	Controlled / uncontrolled expansion (active-leaf ancestors auto-expand).
`expansionMode`	`"single" \| "multiple"`	multiple	"single" = accordion per section.
`renderItem`	`(args) => ReactNode`	—	Full control over each row — for router NavLink, etc.

selectedKey

string

Default: —

Which leaf is the current page.

isItemActive

(item) => boolean

Default: —

Custom active check (wins over selectedKey).

onItemSelect

(item) => void

Default: —

Fired on leaf / link activation.

expandedKeys / defaultExpandedKeys / onExpandedChange

Iterable<string> / …

Default: —

Controlled / uncontrolled expansion (active-leaf ancestors auto-expand).

expansionMode

"single" | "multiple"

Default: multiple

"single" = accordion per section.

renderItem

(args) => ReactNode

Default: —

Full control over each row — for router NavLink, etc.

Prop	Type	Default	Description
`isCollapsed`	`boolean`	false	Icon rail + hover/focus flyouts for groups.

isCollapsed

boolean

Default: false

Icon rail + hover/focus flyouts for groups.

Prop	Type	Default	Description
`classNames`	`{ base?, list?, item?, link?, sectionTitle? }`	—	Slot class overrides.

classNames

{ base?, list?, item?, link?, sectionTitle? }

Default: —

Slot class overrides.