Breadcrumb Trail
Build a clickable breadcrumb trail where clicking a crumb truncates the path to that level, with the current path shown in a live status region.
You are building a breadcrumb navigation component.
The full trail of crumbs is ["Home", "Library", "Data", "Reports"]. Each crumb is rendered as a real <button>.
Clicking a crumb truncates the trail so it ends at that crumb — every crumb *after* the clicked one is dropped. For example, starting from Home / Library / Data / Reports, clicking Library leaves Home / Library.
A live region with role="status" always displays the current path: the visible crumb labels joined by " / " (e.g. Home / Library / Data / Reports).
Clicking the last (deepest) crumb is a no-op — the trail is already truncated to it, so nothing changes.
The component renders only the crumbs that are currently in the trail; truncated crumbs are removed from the DOM.
Requirements
- Render each crumb in the current trail as a real <button> element with its label as the text.
- Start with the full trail ["Home", "Library", "Data", "Reports"] visible.
- Display the current path inside an element with role="status", as the visible crumb labels joined by " / ".
- Clicking a crumb truncates the trail to that crumb: drop every crumb after it (keep indices 0..clickedIndex).
- Truncated crumbs must be removed from the DOM (not just hidden).
- Clicking the last (deepest) visible crumb is a no-op — the path is unchanged.
Hints (4)
- Keep state as a count/length of how many crumbs are visible (or the truncated array). Clicking index i should keep i+1 crumbs.
- Render with FULL.slice(0, count) so dropped crumbs leave the DOM entirely.
- Build the status text with visibleCrumbs.join(' / ') so it always mirrors what is rendered.
- Clicking the last crumb sets the trail to the same length it already is — that naturally produces a no-op.
Topics
- React
- DOM Manipulation
Asked at
Amazon · Groww · BrowserStack · CRED · Delhivery · Atlassian
