Nested Command Menu
A Raycast-grade command palette with pushed pages and a breadcrumb, fuzzy search with lit letters, grouped rows with shortcut chips, a sliding spring highlight, a preview pane, toggle items and a full combobox keyboard model.
DOM + CSS0 deps1 file · 48 KB TSXreduced-motion aware
Props
"use client"; /* * NestedCommandMenu: a Raycast / Linear style command palette with pages. * * A frosted panel holds a search field, a breadcrumb of the pages you have * pushed (Home > Theme > Accent colour), grouped rows with an icon tile, a * label, a hint and shortcut chips, a right-hand preview of the active item * on wide containers, and a footer of key hints. Pages push and pop with a * short directional slide, the active-row highlight slides between rows on * an overshooting spring, and typing fuzzy-matches the current page with the * matched letters lit. It is an ARIA combobox over a listbox: focus stays in * the input and aria-activedescendant names the active row. * * Keys: arrows, Home/End, PageUp/PageDown move; Enter runs or opens a page; * Right opens a page and Left (or Backspace) on an empty query goes back; * Escape closes. Toggle items flip in place and show their state. */ // --------------------------------------------------------------- // Full source available with a viberdy Pro subscription. // https://viberdy.dev/pricing // --------------------------------------------------------------- }
Details
About this component
A flat command palette is one list away from executing anything, which stops scaling the moment commands group naturally. This menu makes drilling a real navigation state: a path of item ids, pushed when you open a page and popped on Back, Left or Backspace on an empty query. The list, the breadcrumb and the preview are all derived from that path, so they cannot drift apart. Each page is searched on its own with a subsequence matcher that prefers word starts and runs, and the matched letters are lit in the row. Rows carry an icon tile, a label, a hint and shortcut chips, grouped under small-caps headers; toggle items flip in place and show On or Off. On a wide container a preview pane describes the active item, and on a narrow one it gives way to full-width 44px rows with Back and Open buttons for touch. Pass your own tree through items (id, label, icon, hint, description, shortcut, keywords, group, children, toggle) and receive runs through onSelect.
Curator’s note
Rebuilt in October as a Raycast-grade palette: pages push and pop with a directional slide, the highlight rides a spring between rows, and typing fuzzy-matches with the matched letters lit.
