easyMachine Coding

Build a Breadcrumbs component

Q: Build a Breadcrumbs component

## Building a Breadcrumbs Component in React **Mental model:** Breadcrumbs are an ordered list of links ending in the current page (which is plain text, not a link). The one interesting twist is *collapsing* the middle when the trail is long — keep the first crumb and the last few, replacing the rest with an ellipsis. ### Step 1 — Semantic structure Use ` ` wrapping an ` `; the last crumb gets `aria-current="page"`. ```jsx {/* crumbs */} ``` ### Step 2 — Render link vs current Every crumb but the last is a link; the last is non-interactive text. ```jsx const isLast = i === shown.length - 1; isLast ? {crumb.label} : {crumb.label} ``` ### Step 3 — Collapse the middle When the trail exceeds `maxItems`, keep the first crumb and the last `maxItems - 1`, and mark a gap. ```jsx let shown = items, collapsed = false; if (maxItems > 0 && items.length

554 views

Understand the problem

Build breadcrumbs that collapse the middle when too long.

ReactNavigationUI

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

Solve in

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

React solution

Complete solutionRun Playground

import React from 'react';
import Breadcrumbs from './src/Breadcrumbs';

const items = [
  { label: 'Home', href: '#home' },
  { label: 'Electronics', href: '#electronics' },
  { label: 'Computers', href: '#computers' },
  { label: 'Laptops', href: '#laptops' },
  { label: 'ProBook 14', href: '#probook' },
];

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 20 }}>
      <h1>Breadcrumbs Demo</h1>
      <h3>Full</h3>
      <Breadcrumbs items={items} />
      <h3>Collapsed (maxItems = 3)</h3>
      <Breadcrumbs items={items} maxItems={3} />
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Build a Typewriter Effect

Build a Skeleton Loader