Sidebar
ProApp and docs sidebars: a folding rail, a workspace switcher, a mail shell, and a docs tree.
WorkspaceA product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.
- The main navigation of a multi-workspace app.
- Sidebars with draggable favorites and inline project creation.
- Navigation that should collapse to an icon rail with the [ shortcut.
- Use sidebar-rail when you need the whole app shell with a mobile sheet.
- Use docs-sidebar for documentation trees.
- Use inbox-sidebar for mail folders and labels.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as the main navigation of a multi-workspace app. Load workspaces, favorites, and projects from your API, route through onNavigate, and persist order and new projects; creation in the preview is simulated.
import { WorkspaceSidebar } from "@/components/arc/blocks/workspace-sidebar/workspace-sidebar";import { useRouter } from "next/navigation"; export function AppNav() { const router = useRouter(); return ( <WorkspaceSidebar onNavigate={({ workspace, id }) => router.push(`/${workspace}/${id}`)} onCollapsedChange={(collapsed) => localStorage.setItem("rail", String(collapsed))} /> );}WorkspaceSidebar
A product sidebar with a workspace switcher, live search, draggable favorites, inline project creation, and a collapsible icon rail. Workspaces, favorites, and projects are sample data.
classNamestring–Extra class on the root element.onNavigate(target: { workspace: string; id: string; name: string }) => void–Called when a favorite or project is opened. Connect it to your router.defaultCollapsedbooleanfalseStart as the narrow icon rail.onCollapsedChange(collapsed: boolean) => void–Called when the sidebar collapses or expands, from the toggle or the [ shortcut.- [
- Toggles the icon rail when focus is not in a text field, menu, or dialog.
- Alt+Arrow UporDown
- Moves the focused favorite up or down.
- Escape
- Clears the search, or cancels a new project name.
- The workspace switcher is a Radix dropdown menu with full menu keyboard support.
- Favorites can be reordered by keyboard as well as by drag.
- The rail shortcut ignores inputs, menus, and dialogs so typing is never hijacked.
- The sidebar width springs between full and rail, and favorites reorder with layout animation.
- New projects slide in and counts roll with the animated counter.
- Reduced motion is applied after hydration and makes width and reorder changes instant.
- The open width is the --full custom property, 272px by default, and the rail is 64px.
- It has no mobile sheet; below 380px it only shortens to 660px, so pair it with drawer on phones.
- Favorites drag on the y axis with Reorder, and Alt+Arrow keys reorder without a pointer.
- Width springs through one motion value, so collapsing does not re-render the lists.
- Lists are not virtualized; keep favorites and projects to a sidebar's worth of rows.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as the main navigation of a multi-workspace app.
- Load workspaces, favorites, and projects from your API, route through onNavigate, and persist favorite order and new projects yourself.
- Composes Arc search-field, avatar, animated-counter, text-morph, and button.
The full library index for assistants is at /llms.txt.