Build a Breadcrumbs component | Interview Question

Q: Build a Breadcrumbs component

**Target Audience:** Beginners preparing for a frontend machine coding round. You need basic React (props, `useState`, lists with `key`); the accessibility details are explained here. **Difficulty:** Easy > **How to read this doc:** Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Code excerpts are copied from the runnable solution; the Verified blocks are real output from React 19.3.1 in StrictMode (jsdom) and from Chromium 141 for wrapping and keyboard activation. ## 1. Why This Even Matters — A Story First In the fairy tale, Hansel and Gretel drop breadcrumbs on the way into the forest so they can find the way back. A website does the same: "Home / Projects / Codepad / src" tells you where you are and lets you jump back to any level in one click. **Breadcrumbs** look like the easiest widget in the batch, and the basic version is. The interview signal is in three details: the

The problem

Question presented to candidate: "Our file manager shows where you are as a trail: Home / Projects / Codepad / src / components. Build a Breadcrumbs component. Each level except the last is a link back to that level; the last one is the current page. Deep paths do not fit on a phone, so when there are too many levels, collapse the middle into an ellipsis that the user can expand."

Requirements:

Data-driven: takes an array of { label, href } items and an onNavigate(index) callback (or event).
Renders a nav landmark labelled "Breadcrumb" containing an ordered list; separators are decorative and hidden from screen readers.
Every item but the last is a link; the last is plain text marked aria-current="page".
When there are more items than maxItems (default 4), show the first item, an ellipsis button and the last two items. The button has an accessible name such as "Show 2 hidden levels"; activating it reveals every level and moves focus to the first revealed link.
Navigating to a new trail collapses it again. The trail wraps rather than overflowing on a 360 px screen.

What a strong answer should cover:

Deriving the visible entries (with one ellipsis marker) from the items, maxItems and expanded state, rather than storing a second list.
Correct semantics: nav with aria-label, ol (order matters), aria-current="page", separators with aria-hidden.
Why the ellipsis is a button (it changes the view) while crumbs are links (they navigate), and why focus must move after expanding.
Resetting the expanded state when the trail changes (a key, or an input setter).
Intercepting link clicks for client-side navigation while keeping real hrefs for open-in-new-tab.

Clarifying questions expected:

"How many items before and after the ellipsis, and is it configurable?"
"Should the ellipsis expand in place or open a menu of the hidden levels?"
"Do the crumbs come from the router, or are they passed in?"

Code / implementation expected: Yes. A component plus a small demo in which you can open subfolders and click crumbs to go back up.

React
Navigation
UI

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: Beginners preparing for a frontend machine coding round. You need basic React (props, useState, lists with key); the accessibility details are explained here. Difficulty: Easy

How to read this doc: Every idea is explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Code excerpts are copied from the runnable solution; the Verified blocks are real output from React 19.3.1 in StrictMode (jsdom) and from Chromium 141 for wrapping and keyboard activation.

1. Why This Even Matters — A Story First

In the fairy tale, Hansel and Gretel drop breadcrumbs on the way into the forest so they can find the way back. A website does the same: "Home / Projects / Codepad / src" tells you where you are and lets you jump back to any level in one click.

Breadcrumbs look like the easiest widget

The solution is hidden so you can try first

8 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 Breadcrumbs from "./src/components/Breadcrumbs";
import { childrenOf } from "./src/utils/tree";

export default function App() {
  const [path, setPath] = useState([
    "Home",
    "Projects",
    "Codepad",
    "src",
    "components",
  ]);
  const items = path.map((label, i) => ({
    label,
    href: "#/" + path.slice(0, i + 1).join("/"),
  }));
  const folders = childrenOf(path);

  return (
    <main className="page">
      <h1>Files</h1>
      {/* key: a new path is a new trail, so the expanded state resets to collapsed */}
      <Breadcrumbs
        key={path.join("/")}
        items={items}
        maxItems={4}
        onNavigate={(index) => setPath(path.slice(0, index + 1))}
      />
      <section className="folder" aria-label="Subfolders">
        {folders.length === 0 && <p className="empty">No subfolders here.</p>}
        {folders.map((name) => (
          <button
            key={name}
            type="button"
            className="open"
            onClick={() => setPath([...path, name])}
          >
            📁 {name}
          </button>
        ))}
      </section>
    </main>
  );
}

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.