Designing a 2-Level Sidebar in React

Navigation design is often underestimated. A good sidebar can make a complex app feel simple; a bad one makes even simple apps feel confusing.

The Requirements

For the QA Dashboard, I needed:

• Top-level sections (Test Runs, Projects, Settings)
• Sub-items within each section
• Collapsible groups
• Active state highlighting
• Keyboard accessible

The Component Structure

<Sidebar>
  <SidebarGroup label="Testing">
    <SidebarItem href="/runs" icon={<PlayIcon />}>Test Runs</SidebarItem>
    <SidebarItem href="/cases" icon={<ListIcon />}>Test Cases</SidebarItem>
  </SidebarGroup>
  <SidebarGroup label="Releases">
    <SidebarItem href="/releases" icon={<TagIcon />}>Releases</SidebarItem>
  </SidebarGroup>
</Sidebar>

State Management

The expanded/collapsed state lives in localStorage so it persists across page refreshes.

Accessibility

Each group header has aria-expanded and aria-controls, and keyboard users can navigate with arrow keys.