ContextRail

Live preview

Loading example…

Work area with a persistent side rail (cart, payment, selected table). The rail sticks to the top of the scroll container with its own scroll, and its width grows with the container. Under breakpoint it stacks below the work area, or with collapse="sheet" it leaves the page for a bottom sheet opened from the summary bar. breakpoint="never" keeps it beside the work area at any width, "always" collapses it at any width. Widths and cuts follow the container (@container/rail), not the viewport.

Import

import { ContextRail } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/context-rail.

Usage

<ContextRail rail={cart} railLabel="Pedido">
  {dishes}
</ContextRail>

Props

Prop	Type	Default	Description
`children` *	`ReactNode`		The work area.
`rail` *	`ReactNode`		Content of the rail.
`width`	`number \| ContextRailWidths`		Rail width in px, or one width per breakpoint. Defaults to 360 / 400 / 440.
`stickyTop`	`number`	`0`	Distance (px) the sticky rail keeps from the top of the scroll container. Defaults to 0.
`breakpoint`	`"always" \| "never" \| 720 \| 960 \| 1280`	`720`	Container width under which the rail collapses (`"never"` / `"always"` pin it). Defaults to 720.
`collapse`	`"stack" \| "sheet"`	`"stack"`	Collapsed behaviour: `"stack"` puts the rail below the work area; `"sheet"` hides it behind a `summary` bar that opens it as a bottom sheet.
`summary`	`ReactNode`		Compact bar shown while collapsed to a sheet (total plus the main action). It owns the button that opens the sheet. Inside an `AppShell` with a `bottomBar` it sits above that bar.
`sheetLabel`	`string`		Label of the button that opens the sheet, and name of the sheet.
`railLabel`	`string`		Accessible name of the rail region.
`sheetOpen`	`boolean`		Controlled open state of the sheet.
`onSheetOpenChange`	`((open: boolean) => void)`
`className`	`string`
`classNames`	`Partial<Record<ContextRailPart, string>>`		Per-part classes merged with `cn`; consumer classes win. `className` still targets the root and is merged last.

* marks a required prop.

Storybook stories

Source

packages/ui/src/containers/context-rail/context-rail.tsx