Build a Collapsible Sidebar Menu | Interview Question

Q: Build a Collapsible Sidebar Menu

**Target Audience:** Frontend candidates preparing for a machine coding round. Assumes React state, props and lists; lazy state initialisers, persistence and disclosure ARIA are explained here. **Difficulty:** Medium > **How to read this doc:** Plain words first, then a 📌 Interview term: callout. Logic was verified on React 19.3.1 in jsdom; widths, the transition, accessible names, reload persistence and Tab order were checked in Chromium 141. ## 1. Why This Even Matters — A Story First A big office building has a directory board in the lobby: floors down the side, departments listed under each floor. Visitors who know the building want a slim version, just the floor numbers, so they can walk past quickly. Newcomers want the full board. And whoever you are, a little arrow shows "You are here". A collapsible sidebar is that directory. It is a classic machine-coding prompt because it is all about **state modelling**: nested data, per-group open state, a global collapsed

The problem

Question presented to candidate: "Build the left navigation for our dashboard. It has top-level pages and a couple of groups with sub-pages. Users can collapse it to a narrow icons-only rail to get more room, and it should remember that choice next time they visit. The current page must be clearly highlighted."

Requirements:

Render nested navigation data: top-level links and groups with child links.
Each group expands and collapses independently; the group holding the active page starts expanded.
A toggle collapses the sidebar to an icons-only rail and expands it again; the collapsed state survives a reload (localStorage, with failures handled).
Clicking a link makes it the active page, highlighted and marked aria-current="page"; the main area shows the current page.
In the rail, labels are visually hidden but still the accessible names, icons show a native tooltip, the group holding the active page is marked, and clicking a group expands the sidebar and opens that group.

What a strong answer should cover:

A data-driven render from a nested array, with a small state model: collapsed, a set of open group ids, and the active id owned by the parent (or the router).
Derived values: a group is shown expanded only when it is open and the sidebar is not collapsed.
Disclosure ARIA (aria-expanded, aria-controls, hidden) inside a nav landmark, not role="menu".
Visually hidden labels instead of display: none, so the rail keeps accessible names.
Safe persistence: read once on start, write on change, wrapped in try/catch.

Clarifying questions expected:

"Does the active page come from the router (URL), or is it local state?"
"Should open groups be remembered too, or only the collapsed state?"
"On mobile, should it become an overlay drawer instead?"

Code / implementation expected: Yes. A sidebar component, the nav data and a page that shows the current item; CSS width transition.

React
Navigation
Layout

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend candidates preparing for a machine coding round. Assumes React state, props and lists; lazy state initialisers, persistence and disclosure ARIA are explained here. Difficulty: Medium

How to read this doc: Plain words first, then a 📌 Interview term: callout. Logic was verified on React 19.3.1 in jsdom; widths, the transition, accessible names, reload persistence and Tab order were checked in Chromium 141.

1. Why This Even Matters — A Story First

A big office building has a directory board in the lobby: floors down the side, departments listed under each floor. Visitors who know the building want a slim version, just the floor numbers, so they can walk past quickly. Newcomers want the full board. And whoever you are, a little arrow shows "You are here".

A collapsible sidebar is that directory. It is a classic machine-coding prompt because it

The solution is hidden so you can try first

10 min read · 9 sections

React solution

Every file of the working solution. Open it in the playground to run and change it.

ReactComplete solution

Open in playground

import { useState } from "react";
import Sidebar from "./src/components/Sidebar";
import { NAV, findLabel } from "./src/utils/nav";

export default function App() {
  const [active, setActive] = useState("dashboard");
  return (
    <div className="layout">
      <Sidebar items={NAV} active={active} onNavigate={setActive} />
      <main className="content">
        <h1 data-testid="current">{findLabel(active)}</h1>
        <p>
          The sidebar remembers whether it is collapsed, even after a reload.
        </p>
      </main>
    </div>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.