# BottomDock

> A raft of page actions pinned to the bottom of the frame.

- **Level**: molecule · **Status**: stable · **Role**: navigation
- **Import**: `import { BottomDock, BottomDockItem } from "@rrios-forge/ui/molecules/bottom-dock";`
- **Source**: `packages/ui/src/molecules/bottom-dock`

Bottom-anchored primary navigation. Two semantic axes (`density`, `orientation`) and three slots (`workspace`, `items[]`, `user`). The active item wears a neutral capsule that hugs its icon and label and slides between items; the dock surface has a hairline top edge.

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `orientation` | — | `horizontal` | `horizontal` | The direction the parts run: a row (horizontal) or a column (vertical); responsive stacks on phones and runs in a row from sm. |
| `active` | — | `true` `false` | `false` | The current destination or item: marked as current to assistive tech. |
| `disabled` | — | `true` `false` | `false` | Not available: dimmed, skipped by the keyboard, ignores the pointer. |

## Stories

- [Playground](/?path=/story/components-molecules-bottomdock--playground) · frame: `/iframe.html?id=components-molecules-bottomdock--playground&viewMode=story`
- [Comfortable](/?path=/story/components-molecules-bottomdock--comfortable) · frame: `/iframe.html?id=components-molecules-bottomdock--comfortable&viewMode=story`
- [Compact](/?path=/story/components-molecules-bottomdock--compact) · frame: `/iframe.html?id=components-molecules-bottomdock--compact&viewMode=story`
- [With badges](/?path=/story/components-molecules-bottomdock--with-badges) · frame: `/iframe.html?id=components-molecules-bottomdock--with-badges&viewMode=story`
- [Items only (no workspace / user)](/?path=/story/components-molecules-bottomdock--items-only) · frame: `/iframe.html?id=components-molecules-bottomdock--items-only&viewMode=story`
- [asChild · framework Link](/?path=/story/components-molecules-bottomdock--as-child-with-link) · frame: `/iframe.html?id=components-molecules-bottomdock--as-child-with-link&viewMode=story`
- [asChild · prevents browser navigation](/?path=/story/components-molecules-bottomdock--as-child-prevents-navigation) — interaction test · frame: `/iframe.html?id=components-molecules-bottomdock--as-child-prevents-navigation&viewMode=story`
- [Mobile](/?path=/story/components-molecules-bottomdock--mobile) · frame: `/iframe.html?id=components-molecules-bottomdock--mobile&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-013 — PageShell: mobile-nav polymorphism
- ADR-022 — The material family: `solid` and `vibrant`

## 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).