shadcn.io is not affiliated with official shadcn/ui
Command Menu Sidebar Block for React
A project hub in a fixed-height window whose muted sidebar opens a command palette from a Search button or Ctrl and K, with Recent, Navigation and Actions that go to a page, fold the rail or add a page.
Installation
Overview
Open every page from one button with this command menu sidebar for React with Base UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar in the theme's muted tone for Jumpcrest, a project hub, whose first row is a Search button dressed like a field, with its key hint beside it. The button, a search icon in the top bar on a phone, or Ctrl (Command on Apple devices) with K while focus is inside the window opens the Command palette in a dialog. Recent lists the last three pages, Navigation all eight, and Actions offers Toggle sidebar and New page; typing narrows the rows and marks the match. Choosing a page opens it, Toggle sidebar folds the rail, and New page adds an Untitled page to the list. Closing returns focus to the button. Folded to icons, the button becomes an icon with a tooltip. The page lists the chosen page's entries. It's built from Sidebar, Command, Kbd, Search Highlight Text, Button, Avatar and Guides, with a CSS entrance only. For hubs, docs and any app with more pages than a rail can hold.
FAQ
How is the palette opened?
Three ways: the Search button in the sidebar, the search icon in the top bar (shown on phones), and Ctrl or Command with K. The key works from a capture listener on the window's own element, so it only fires while focus is inside the window and never takes the key from the site around it. The caps read ⌘ K on Apple devices and Ctrl K elsewhere, swapped in after the page loads.
What do Recent, Navigation and Actions hold?
Recent shows the last three pages you opened, newest first, and only while the field is empty. Navigation lists every page, and typing narrows it by name and a few keywords ("people" finds Members). Actions has Toggle sidebar and New page. Each row says what it is under its name, and the footer counts the results.
What does New page do?
It adds one Untitled page to the end of the list and opens it, and says so in the status line. Choosing it again does not add a second; it opens the first. Nothing is saved, so a reload removes it.
Where does focus go when the palette closes?
Back to the visible Search button, the rail's on a wide screen and the top bar's on a phone, whether the palette closed by a choice, by Escape or by a click away. Closing also starts the next search over with an empty field.
What stays in the page, and how do I connect it?
Everything. The pages and their entries are typed in the file, and the palette filters them in the block rather than in the library, so results are the same on every target. To make it real, replace the page list with your routes and make each Navigation row navigate. The pages in the rail are links to # whose handler shows the page instead of navigating. They're SidebarMenuButtons with render set to an a element.