shadcn.io is not affiliated with official shadcn/ui
Command Palette Navbar Block for Solid
A navbar for a notes app with a field-looking button and a shortcut that open a command palette: recent notes first, then pages, actions and settings in labelled groups, with the keys that work shown beside each row.
Installation
Overview
A command-palette navbar for Solid with Ark UI, the bar an app keeps above its pages. For Notehelm, a project notes app, the wordmark leads, four page links follow, and a button that looks like a search field, with its shortcut at the end, sits beside a Shine Button. The button, or Command and K from anywhere on the page (Control and K elsewhere), opens a command palette over the page: three recent notes first, then pages, actions and settings in labelled groups, narrowed as you type by label or group. Rows that have a key of their own (N for a new note, I to invite teammates, a comma for account settings) show it at the end and the key really does it from the page. Choosing a page moves the bar's current-page stroke, choosing a note moves it to the top of Recent, and a hidden status line says what was opened. The palette is a dialog, so the bar stays one bar high (64 pixels, 56 on a phone). On a phone the button is an icon and a menu button opens a sheet from the top with the same links. It's built from Command, Kbd, Sheet, Button, Shine Button and Guides with Lucide icons and your theme's tokens for every colour. It is not a call to action built around one shortcut, nor a line of text that hints at a command. For apps and products whose bar should reach any page or action in two keystrokes.
FAQ
How do I change the rows and make a choice do something?
Edit NOTES and OTHERS at the top of the file: each row has a group, an icon, a label, a value and, optionally, a key. choose(value) is the one place a row does its work: pages set the current page, notes move to the top of recent, and every choice updates the hidden status line. Replace its body with your router (router.push) and your actions. The page links in the bar and the sheet call the same function, so the bar and the palette never disagree about the current page.
How does the Command or Control key cap work?
The caps render the Apple key first, so the server and the first client render match, and swap to Ctrl after mount when the browser's user agent isn't an Apple device. The shortcut itself accepts both Command and Control with K on every device, and the button declares both with aria-keyshortcuts. The caps are hidden below the sm breakpoint, where there is rarely a keyboard.
Do the keys beside the rows work?
Yes. A document listener runs a row's key when no modifier is held, the palette is closed and the keyboard isn't in an input, a textarea, a select or an editable element, so typing "i" in the palette's own field only searches. Command or Control with K opens the palette from anywhere, including a text field.
How does it work with a keyboard and a screen reader?
The button says whether the palette is open (aria-expanded) and which element it controls (aria-controls). The palette is a modal dialog named Command palette: focus moves to its field, the arrow keys move through the rows, Enter chooses one and Escape closes it, and focus returns to the button that opened it (or to the visible one when the shortcut did).
The rows are options of a listbox that is always open inside the dialog, and the dialog hands focus back through finalFocusEl.
How does it work on a phone?
Below the md breakpoint the field-looking button becomes an icon button that opens the same palette, and below lg a menu button opens a sheet from the top whose header lines up with the bar, with the four links and Get Notehelm (the bar's own button hides below sm). Choosing a link closes the sheet and Escape returns focus to the menu button. Nothing wraps at 320 pixels, and the palette fits the screen.
How do the links and buttons work on each library?
Every link points at #: point them at your pages.
Get Notehelm's asChild receives its props: spread them onto your router's link.
To keep the bar in view while the page scrolls, add sticky top-0 z-40 bg-background/80 backdrop-blur to the header; its top rule is the page's first line and it draws no bottom border.