Build breadcrumbs with overflow

mediumUI Components+180 XP

Build a breadcrumb trail. When the trail has 4 or fewer crumbs, render all of them.

When it has more than 4, render the first, an overflow menu button, and the last two. Clicking the menu reveals the hidden middle crumbs; clicking anywhere else dismisses.

Examples

// trail = ["Home", "Workspace", "Projects",
//           "Design System", "Buttons", "Primary"]
// Rendered: Home / … / Buttons / Primary

// Click the "…" button
// → menu lists Workspace, Projects, Design System

// Click "…" again → menu disappears

First + last two + collapsed middle; the toggle is a two-state popover.

// Original index is preserved on every crumb:
<li data-testid="crumb-0">Home</li>
<button data-testid="overflow-toggle">…</button>
<li data-testid="crumb-4">Buttons</li>
<li data-testid="crumb-5">Primary</li>

Hidden crumbs render as `hidden-{originalIndex}` inside the menu, not re-numbered.

What it has to do

Each visible crumb is `<li data-testid="crumb-{index}">` where `{index}` is the 0-based position in the original trail (not the visible position).
A `/` separator between crumbs is fine (styling-only, not graded).
When the trail has more than 4 items, render an overflow button `<button data-testid="overflow-toggle">` between the first crumb and the last two.
When overflow is open, render a `<ul data-testid="overflow-menu">` containing each hidden crumb as `<li data-testid="hidden-{index}">`.
Overflow starts closed. Clicking the toggle opens it; clicking it again closes it.
A trail of 4 or fewer items renders every crumb and no overflow toggle.

Notes

Only overflow when `trail.length > 4` — 4-or-fewer trails render fully with no toggle at all.
Dismiss on outside click in a production build (listen on `document` with a ref); the grader only exercises the toggle button, but users expect popover-style dismissal.
Give the overflow button an accessible label (e.g. `aria-label="Show hidden crumbs"`) and `aria-expanded` — a bare `…` is unreadable to assistive tech.

Asked atGoogleMicrosoftShopifyAtlassian

Stuck? The react course covers the ideas this problem is built on.

import { useState } from "react";

const TRAIL = ["Home", "Workspace", "Projects", "Design System", "Buttons", "Primary"];

export default function App() {
  const [open, setOpen] = useState(false);

  // TODO: compute visible/hidden crumbs; render the overflow when
  // TRAIL.length > 4; wire the toggle.

  return (
    <nav aria-label="Breadcrumb" style={{ fontFamily: "sans-serif", padding: 16 }}>
      <ol style={{ display: "flex", gap: 6, listStyle: "none", padding: 0 }}>
        {TRAIL.map((crumb, i) => (
          <li key={i} data-testid={`crumb-${i}`}>{crumb}</li>
        ))}
      </ol>
    </nav>
  );
}

5 tests · +180 XP

Discussion

No comments yet. Be the first to say something.

All problems23 / 25