# ContextRail

> Work area with a persistent side rail (cart, payment, selected table).

Source: https://ui.jcsoftdev.com/docs/components/context-rail

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

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

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

## Usage

```tsx
<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

- [Default](/storybook/?path=/story/containers-contextrail--default)
- [Fixed Width](/storybook/?path=/story/containers-contextrail--fixed-width)
- [Collapsed Stack](/storybook/?path=/story/containers-contextrail--collapsed-stack)
- [Collapsed Sheet](/storybook/?path=/story/containers-contextrail--collapsed-sheet)
- [Sheet Above Tab Bar](/storybook/?path=/story/containers-contextrail--sheet-above-tab-bar)
- [Never Collapses](/storybook/?path=/story/containers-contextrail--never-collapses)
- [Always Collapsed](/storybook/?path=/story/containers-contextrail--always-collapsed)
- [Sticky In Scroll](/storybook/?path=/story/containers-contextrail--sticky-in-scroll)

## Source

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