Navigation 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 console, 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 component and share the block's state. 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.

Each word you type must start some word of the page's path or of its hidden keywords, so the order does not matter and "inv bill" works as well as "bill inv". wordsOf splits on anything that is not a letter or a digit and ignores case and accents. The words are marked wherever they occur in the name and the path. A section with no match disappears, and with nothing left the empty state tells you to try the start of words from the path.

Its row stays in the list with a tick and the words "You are here", so the list never changes length. Choosing another page moves both: the breadcrumb in the drawn page header shows its path, the sidebar tints its section, and the status line says "Went to Settings › Billing › Invoices. In this demo only." In your app set current from your router.

Replace PAGES with your route table: each page("Section/Group/Name", "keywords") is one row, and the trail becomes the title, the path and the section. In pick call your router instead of setting local state, for example router.push(found.href) with an href added to Page.

Yes. Type to search, the arrow keys move through the rows, Enter goes to the highlighted page and Escape closes the menu and puts focus on the field; 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 count is spoken a moment after typing stops.

The copy shown on load docks to the top of the page, so the keyboard does not cover the foot; the drawn sidebar goes, the key hints go and the count stays. Names and paths truncate on one line. The real dialog keeps the Command dialog's own phone layout.