Sidebar railPro

• 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:

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

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

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: A product sidebar with a workspace switcher, live search, draggable favorites, and inline projects.
• Sidebar: Docs: A docs layout with a live filtering nav tree, version switcher, and a gliding on this page outline.
• Sidebar: Inbox: A mail sidebar whose Compose button grows into a composer and whose folders take dropped mail.
• Breadcrumb: Show where a page sits in a hierarchy.
• Tooltip: Short supporting text for unfamiliar controls.