# Breadcrumb

> Where the reader is: the trail of pages above this one, each a link back.

- **Level**: molecule · **Status**: stable · **Role**: navigation
- **Import**: `import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage } from "@rrios-forge/ui/molecules/breadcrumb";`
- **Source**: `packages/ui/src/molecules/breadcrumb`

The trail from the top of the product to the current page — Workspaces › Acme Inc. › Settings — so a person sees where they are and can step back up. Renders `<nav aria-label="Breadcrumb">`, an announced navigation landmark; the current page reads `aria-current="page"`. Separators are `aria-hidden`.

## Stories

- [Playground](/?path=/story/components-molecules-breadcrumb--playground) · frame: `/iframe.html?id=components-molecules-breadcrumb--playground&viewMode=story`
- [With ellipsis](/?path=/story/components-molecules-breadcrumb--with-ellipsis) · frame: `/iframe.html?id=components-molecules-breadcrumb--with-ellipsis&viewMode=story`

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