# Sidebar rail

> An app shell whose sidebar folds into an icon rail and slides in as a sheet on phones.

- Page: https://ui.xzero.co.uk/components/blocks/sidebar-rail

## Variant: App rail

An app shell whose sidebar folds into an icon rail and slides in as a sheet on phones.

- Access: Xzero Pro
- Registry id: `sidebar-rail`
- Source file: `registry/blocks/sidebar-rail/sidebar-rail.tsx`
- Built from: Tooltip, Avatar, Avatar group, Badge, Animated counter
- Keywords: react app shell, sidebar layout, collapsible sidebar, icon rail navigation, mobile nav sheet, dashboard layout, nested sidebar

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.

### When to use

- 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.

### When not to use

- 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

Register both Xzero UI namespaces in your project's components.json:

```json
{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}
```

```bash
npx shadcn@4.23.0 add @xzero-ui-pro/sidebar-rail
```

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

### Usage

```tsx
import { SidebarRail } from "@/components/xzero/blocks/sidebar-rail/sidebar-rail";

export default function AppShell() {
  return (
    <main>
      <SidebarRail />
    </main>
  );
}
```

### API reference

#### 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.

### Keyboard interactions

| Keys | Action |
| --- | --- |
| [ | Folds or unfolds the rail when focus is not in a text field, menu, or dialog. |
| Escape | Closes the navigation sheet on narrow widths. |

### Accessibility

- 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.

### Motion

- 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.

### Responsive behavior

- 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.

### Performance

- 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

- 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 Xzero tooltip, avatar, avatar-group, badge, and animated-counter.

### Related

- [Sidebar: Workspace](https://ui.xzero.co.uk/components/blocks/workspace-sidebar/markdown): A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.
- [Sidebar: Docs](https://ui.xzero.co.uk/components/blocks/workspace-sidebar/markdown): A docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline.
- [Sidebar: Inbox](https://ui.xzero.co.uk/components/blocks/workspace-sidebar/markdown): A mail sidebar whose Compose button grows into a composer and whose folders take dropped mail.
- [Breadcrumb](https://ui.xzero.co.uk/components/breadcrumb/markdown): Show where a page sits in a hierarchy.
- [Tooltip](https://ui.xzero.co.uk/components/tooltip/markdown): Short supporting text for unfamiliar controls.