# SidebarSection

> The sidebar's content — in the rail, one group of rows.

- **Level**: molecule · **Status**: stable · **Role**: navigation
- **Import**: `import { SidebarSection } from "@rrios-forge/ui/molecules/sidebar-section";`
- **Source**: `packages/ui/src/molecules/sidebar-section`

Sidebar landmark <aside aria-label> with optional title (header) and footer. Body fills the remaining height; footer pinned at the bottom. Compose NavGroup + NavItem inside. Patterns consulted: Patterns/Navigation · NavigationLayers, Patterns/Page Shells · PageHeader.

## Use it for

- App frame / navigation → **The rail that peeks (ADR-044) — the default and the recommendation.** `PageShell` (defaults: `sidebarMode="rail"`, `sidebarPresentation="inset"`, `mobileNav="tabs"`) + `SidebarSection aria-label` + ONE untitled `NavGroup`: home, search, the rooms, settings — same size, same gap. Wrap every `NavItem` in `PageShell.RailPeek` and compose its panel with `PageShell.PeekHeader` / `PeekFacts` / `PeekLinks`. Search is a button row opening `CommandMenu` (⌘K); settings' peek holds the quick controls; phones get `PageShell.MobileTabBar` (≤ 5). No `TopBar` in an app frame. Opt-ins only when a product needs them: the labelled panel (`sidebarMode="auto"`, ⌘\\ collapse, ADR-040), `island`/`column` (ADR-025), the bubble (`mobileNav="bubble"`)

## Stories

- [Playground](/?path=/story/components-molecules-sidebarsection--playground) · frame: `/iframe.html?id=components-molecules-sidebarsection--playground&viewMode=story`
- [Product nav](/?path=/story/components-molecules-sidebarsection--product-nav) · frame: `/iframe.html?id=components-molecules-sidebarsection--product-nav&viewMode=story`
- [Account nav](/?path=/story/components-molecules-sidebarsection--account-nav) · frame: `/iframe.html?id=components-molecules-sidebarsection--account-nav&viewMode=story`
- [Collapsed preview](/?path=/story/components-molecules-sidebarsection--collapsed-preview) · frame: `/iframe.html?id=components-molecules-sidebarsection--collapsed-preview&viewMode=story`

## Decisions that name it

- ADR-010 — PageShell v4: bottom dock + mobile floating bubble
- ADR-011 — PageShell v5: adaptive lateral sidebar + mobile nav bubble
- ADR-014 — PageShell: Apple Mail / macOS Big Sur visual register

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).