How to build an accessible SideNav in React

role="navigation" with an aria-label names the region; the collapse toggle has an explicit expand/collapse label, groups expose aria-expanded, and the collapsed rail provides tooltips/flyouts so icon-only items remain identifiable

When to use a SideNav

• Persistent primary navigation along the side of an app shell
• Grouping nav items one level deep with collapsible groups
• Saving space with a collapsible icon rail (collapsed / expandOnHover)

When not to use it

• Top-level horizontal navigation — use Header or ShellHeader nav
• A transient contextual menu — use Dropdown

Keyboard interactions

Role navigation, verified at WCAG 2.2-AA.

• Tab
• Enter
• Space
• ArrowDown
• ArrowUp
• Escape

Common mistakes

Avoid: Nesting nav groups more than one level deep

Prefer: Flatten to a single level of grouping, or split into sections

Deep nesting in a sidebar is hard to scan and the component supports only one level by design

Example

<SideNav items={[{ label: 'Home', href: '/', active: true }, { label: 'Reports', href: '/reports' }]} />

See the full SideNav reference →