Docs Tree 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 docs site, 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 open sections and the text you typed in the copy are in the real dialog. 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.

rowsFor(query, opened) is a plain function from the query and the sections you opened to a flat list of rows: each section, then its pages when it is open, then Recent and Popular. Nothing nests in the markup; a page under an open section is indented and names its section for screen readers ("Tokens, in Auth"), and a section row says whether it is open or folded. The arrow keys work while the input is empty; in a right-to-left page the keys swap, as they do in any tree.

They read the highlighted row, which the block keeps from the library. The Command is cmdk, whose highlighted value is controlled with value and onValueChange. To go back up to a section the block presses the Up arrow for you in the input, as many times as there are rows between, so the library's own highlight does the move.

Everything. Choosing a page names it on the drawn docs page and the status line says nothing loaded. In your app build SECTIONS and PAGES from your site's navigation and the headings of each page (a build step can extract them), keep Recent in local storage, and in pick go to the page and its heading.

Yes. Type to search, the arrow keys move through the rows (and, with the input empty, open and fold the tree), Enter opens a page or toggles a section 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. Collapse all is a button above the input; it stays in the tab order even when nothing is open and then says every section is already folded.

The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the section names stay, the section labels on Recent and Popular and the key hints go and the count stays. The real dialog keeps the Command dialog's own phone layout.