# Breadcrumbs and tabs

Breadcrumbs explain hierarchy. Tabs switch between peer views of the current resource. They are related page-navigation patterns, but they are not interchangeable.

## Breadcrumbs

- Start with Home when it provides a meaningful escape route.
- Render intermediate levels as links and the current page as plain text with `aria-current="page"`.
- Keep labels concise and use a consistent separator.
- On small screens, preserve the current page and nearest useful parent; collapse older ancestors when space is constrained.
- Breadcrumbs do not replace the page title.
- Place breadcrumbs above the page header inside the same page frame. The breadcrumb, title, header actions, and first content panel must share one horizontal start edge.
- Use the shared `--content-max-width` page frame for breadcrumbs, headers, and primary content panels, including registries. A product may define a deliberately narrower page type, but it must not let the primary panel escape the frame independently.
- Use regular-weight breadcrumb text at 12–14px, reaching the 14px small-body size on desktop. Intermediate links may underline on hover; the current page remains plain text. Use a 16px home icon and quiet neutral text throughout.

## Tabs

- Use tabs for a small, stable set of peer destinations within one resource or section.
- Use links when changing routes and buttons with `role="tab"` only for in-page tab panels.
- Mark route tabs with `aria-current="page"`; mark in-page tabs with `aria-selected` and connect them to their panel.
- Keep tab order stable. Allow horizontal scrolling on narrow screens rather than wrapping labels into multiple rows.
- Do not use tabs as filters or as a substitute for the primary navigation shell.