Navigation Rail

Overview

The navigation rail is a persistent vertical surface for an app's top-level destinations. It collapses between an expanded 220px label list and a compact 80px icon-only rail, and below 768px it becomes an off-canvas drawer. Built on the shadcn Sidebar composition model — a provider plus Header / Content / Group / Menu / MenuButton / Footer pieces — and restyled to the Morpha MD3 surface with the same state-layer interaction model as Button.

Examples

Styles

Three variants set how the selected item reads: secondary-container (default) fills a solid secondary-container pill, secondary tints the label and icon secondary with no fill, and surface-container fills a subtle surface tint. Unselected items stay low-emphasis (on-surface-variant) across all three.

Sections

Group destinations with NavigationRailGroup and an optional NavigationRailGroupLabel caption. The labels hide automatically when the rail collapses.

Badges

Add a trailing count with NavigationRailMenuBadge — useful for unread or pending indicators. Badges hide automatically when the rail collapses.

Accordion

Nest destinations under a collapsible parent with NavigationRailMenuCollapsible. The trigger expands an indented, label-only sub-menu; the chevron rotates with the open state.

Menu

When the rail is collapsed, the same NavigationRailMenuCollapsible can't show an indented sub-list, so its trigger opens the sub-menu as a click-open Popover flyout to the side instead. Click a nested item (Projects, Analytics) to open it.

Alignment

align="center" vertically centers the menu within the rail (the Figma "middle" alignment); the header and footer stay pinned to the top and bottom.

App shell

Pair NavigationRail with NavigationRailInset for the full layout. The rail header stays reserved for the brand mark — the NavigationRailTrigger lives in the app top bar (the layout), where the same control collapses the rail on desktop and opens it as an off-canvas drawer at mobile widths (below 768px window width).

Installation

npx shadcn@latest add sidebar

API Reference

NavigationRail

NavigationRailProvider

NavigationRailMenuButton

Accessibility

• Renders a native <nav> landmark; menu buttons are native <button>s, so keyboard activation and focus handling come for free.
• The active item sets aria-current="page".
• When collapsed, each item exposes its label through a tooltip — the visible text is only hidden, not removed from the control's accessible name.
• A visible focus ring (3px accent with a 2px offset) is provided via focus-visible.
• ⌘/Ctrl + B toggles the rail; the mobile drawer traps focus and closes on Esc.