Build a File Explorer Toolbar — Breadcrumbs, Search & Context Menu

Question

Accepted Answer

**Requirements**
- Breadcrumbs showing path to current folder; click to navigate.
- Live search that filters tree while preserving ancestors of matches (highlight matches).
- Right-click context menu (New File, New Folder, Rename, Delete) positioned via portal; close on outside click/Esc.

**Architecture**
- Derive `currentPath` by walking `parentMap` from selected id to root.
- Filter: DFS, keep node if itself matches or any descendant matches; return pruned tree.
- Context menu: `onContextMenu` preventDefault, store `{x,y, nodeId}`, render in `createPortal`, use `getBoundingClientRect` + flip if near viewport edge.

**What interviewers look for:** path derivation, filtered tree with ancestor preservation, portal + positioning, outside-click.

**Reference implementation**
```jsx
function filterTree(nodes, query) {
  if (!query) return nodes;
  return nodes.flatMap(n => {
    const match = n.name.toLowerCase().includes(query.toLowerCase());
    if (n.children) {
      const filtered =

Build a File Explorer Toolbar — Breadcrumbs, Search & Context Menu

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THE
STREAK ALIVE.

Understand the problem

Attempt it yourself

Study the solution

Solution ready — 2 min read

Join the discussion

Discussion (0)

KEEP THESTREAK ALIVE.

KEEP THE
STREAK ALIVE.