Theme
Nav group
A titled section of the sidebar that folds away, such as recent concepts.
Examples
Props
NavGroup
A titled section of the sidebar that folds away, such as recent concepts. The title is a heading holding a button, so a screen reader can jump to it and hear whether it is open. In the rail, titles give way to a rule and every group shows its links.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | The heading over the group's links, set as an overline. |
children | ReactNode | — | NavItem elements. |
defaultExpanded? | boolean | true | |
isExpanded? | boolean | — | Open or folded, for an app that keeps the reader's choice itself; leave it out to let the group keep it. |
onExpandedChange? | ((expanded: boolean) => void) | — | Called when the reader opens or folds the group. |
Keyboard
| Key | Does |
|---|---|
| Enter or Space | Folds or unfolds the group |
Accessibility
- The title is a heading holding a button with aria-expanded, so a screen reader can jump to it and hear whether it is open.
- A folded group's links are hidden from everyone. In the rail every group shows its links, under a rule instead of a title.