Page Stack Breadcrumb Command Menu Block for React

So you can see it without a click. On load the menu is the Command drawn inline over a picture of the page list, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the level you reached in the copy is the level the dialog opens at. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

The block keeps one string, the id of the level that is open (the folder's path, or an empty string for Home), and everything else is a function of it: the rows are the entries whose parent is that level, the crumbs are every prefix of the path, and the placeholder and the foot read its name and its count. Going in or out changes the string, clears the search, replaces the list and says where you are ("In Billing, 7 items."). Escape closes the menu and keeps the level, so the next opening is where you left off; choosing a page ends the visit and goes back to Home.

They only act when they mean nothing else. The arrow toward the end goes into the highlighted folder only while the caret is at the end of the text, so it still moves the caret in the middle of a word. The arrow toward the start and Backspace go up only while the input is empty, so they still delete and move the caret otherwise. In a right-to-left page the two arrows swap, and the key hints in the foot mirror with them. On a phone the rows and the crumbs are the way in and out.

All of it. The site tree is typed data (ENTRIES, each with an id that is its path), no page is loaded and nothing is saved; choosing a page only moves the chip in the drawing and the status line. In your app build ENTRIES from your content tree, give each entry its parent's path in its id, and make pick navigate to the page.

Yes. Type to search inside the level, the arrow keys move through the rows, Enter opens the highlighted row and Escape closes the menu and puts focus on the field; the crumbs are buttons in the tab order. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.

The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot. The key hints go and the count stays. The trail scrolls sideways when it is longer than the menu and stays on its last crumb, so the level you are in is always in view.