Sidebar
ProApp and docs sidebars: a folding rail, a workspace switcher, a mail shell, and a docs tree.
App railAn app shell whose sidebar folds into an icon rail and slides in as a sheet on phones.
Live block · sample data
- The frame of a product app with a sidebar, breadcrumbs, and content area.
- Apps with nested nav groups that should fold into an icon rail.
- Shells that need a navigation sheet on narrow widths.
- Use workspace-sidebar when workspace switching and favorites matter more than the shell.
- Use docs-sidebar for documentation.
- Use breadcrumb on its own when the page already has navigation.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this as the frame of a product app. Map the sections to your routes, send selection to your router, and persist the collapsed state per person; press [ to fold the rail.
example.tsx
import { SidebarRail } from "@/components/arc/blocks/sidebar-rail/sidebar-rail"; export default function AppShell() { return ( <main> <SidebarRail /> </main> );}SidebarRail
An app shell with a sidebar that folds into an icon rail, nested nav groups, breadcrumbs, and a sheet on narrow widths. Sections and page content are sample data.
No props.
- [
- Folds or unfolds the rail when focus is not in a text field, menu, or dialog.
- Escape
- Closes the navigation sheet on narrow widths.
- Nav rows set aria-current="page" on the active item and aria-expanded on groups.
- The narrow layout uses a Radix dialog sheet that moves focus to the current item when it opens.
- Rail icons show Radix tooltips with their labels, and section changes are announced in a status region.
- The sidebar folds to a rail on a spring and nested groups expand by height.
- The breadcrumb rises into the new section name.
- Reduced motion makes folding and group changes instant.
- Below 640px container width the sidebar is replaced by a menu button that opens a Radix dialog sheet, up to 288px wide.
- The sheet drags closed to the left, and a ResizeObserver closes it when the shell widens past 640px.
- Content rows drop the timestamp below 420px of content width.
- The shell has a fixed 640px height and scrolls its content inside, so it does not reflow the page.
- Rail tooltips mount only while shown through Radix.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as the frame of a product app.
- Map the sections to your routes, send selection to your router, and persist the collapsed state per person.
- Composes Arc tooltip, avatar, avatar-group, badge, and animated-counter.
The full library index for assistants is at /llms.txt.
