Breadcrumb Trail
A horizontal sequence of links showing the path from a root location to the current page (e.g., Workspace > Project > Issue). Provides hierarchical wayfinding and one-click jump-up navigation.
$ prime install @community/pattern-breadcrumb-trail Projection
Always in _index.xml · the agent never has to ask for this.
BreadcrumbTrail [pattern] v1.0.0
A horizontal sequence of links showing the path from a root location to the current page (e.g., Workspace > Project > Issue). Provides hierarchical wayfinding and one-click jump-up navigation.
Loaded when retrieval picks the atom as adjacent / supporting.
BreadcrumbTrail [pattern] v1.0.0
A horizontal sequence of links showing the path from a root location to the current page (e.g., Workspace > Project > Issue). Provides hierarchical wayfinding and one-click jump-up navigation.
Facts
Label
Breadcrumb Trail
Problem
Users deep inside a hierarchy lose context: where am I, and how do I jump to a higher level without traversing back through every layer?
Solution
Render a single-line trail of ancestor links separated by a chevron or slash, with the current page rendered as plain text (non-link) at the end. Truncate middle segments with an ellipsis when the trail overflows.
Structure
<nav aria-label="Breadcrumb">
<ol role="list">
<li><a href="/">Home</a></li>
<li aria-hidden="true" class="sep">/</li>
<li><a href="/projects">Projects</a></li>
<li aria-hidden="true" class="sep">/</li>
<li>
<button aria-label="Show hidden ancestors" aria-haspopup="menu">...</button>
</li>
<li aria-hidden="true" class="sep">/</li>
<li>
<a href="/projects/web/issues">Issues</a>
</li>
<li aria-hidden="true" class="sep">/</li>
<li>
<span aria-current="page">PRM-1024 Fix login redirect</span>
</li>
</ol>
</nav>
Uses
- @community/method-heuristic-review
Behavior
- The current page is the last item, rendered as text (not a link), with
aria-current='page'. - When the trail overflows the container, collapse middle segments behind an ellipsis button that opens a menu listing them.
- Separators (chevrons, slashes) are decorative — render as
aria-hiddensiblings or via CSS pseudo-elements. - On narrow viewports, optionally show only the parent and current segments (back-button style).
- Long page titles in the current segment should truncate with ellipsis, not wrap.
A11y
- Wrap in
<nav aria-label='Breadcrumb'>and use an ordered list inside. - Mark the current page with
aria-current='page'; do not render it as a link. - Visual separators must be
aria-hidden='true'or generated via CSS — never spoken. - If using an ellipsis menu for collapsed segments, the trigger needs an accessible name like 'Show hidden ancestors'.
Loaded when retrieval picks the atom as a focal / direct hit.
BreadcrumbTrail [pattern] v1.0.0
A horizontal sequence of links showing the path from a root location to the current page (e.g., Workspace > Project > Issue). Provides hierarchical wayfinding and one-click jump-up navigation.
Facts
Label
Breadcrumb Trail
Problem
Users deep inside a hierarchy lose context: where am I, and how do I jump to a higher level without traversing back through every layer?
Solution
Render a single-line trail of ancestor links separated by a chevron or slash, with the current page rendered as plain text (non-link) at the end. Truncate middle segments with an ellipsis when the trail overflows.
Structure
<nav aria-label="Breadcrumb">
<ol role="list">
<li><a href="/">Home</a></li>
<li aria-hidden="true" class="sep">/</li>
<li><a href="/projects">Projects</a></li>
<li aria-hidden="true" class="sep">/</li>
<li>
<button aria-label="Show hidden ancestors" aria-haspopup="menu">...</button>
</li>
<li aria-hidden="true" class="sep">/</li>
<li>
<a href="/projects/web/issues">Issues</a>
</li>
<li aria-hidden="true" class="sep">/</li>
<li>
<span aria-current="page">PRM-1024 Fix login redirect</span>
</li>
</ol>
</nav>
Uses
- @community/method-heuristic-review
Behavior
- The current page is the last item, rendered as text (not a link), with
aria-current='page'. - When the trail overflows the container, collapse middle segments behind an ellipsis button that opens a menu listing them.
- Separators (chevrons, slashes) are decorative — render as
aria-hiddensiblings or via CSS pseudo-elements. - On narrow viewports, optionally show only the parent and current segments (back-button style).
- Long page titles in the current segment should truncate with ellipsis, not wrap.
A11y
- Wrap in
<nav aria-label='Breadcrumb'>and use an ordered list inside. - Mark the current page with
aria-current='page'; do not render it as a link. - Visual separators must be
aria-hidden='true'or generated via CSS — never spoken. - If using an ellipsis menu for collapsed segments, the trigger needs an accessible name like 'Show hidden ancestors'.
Examples
- @community/example-github-breadcrumb
- @community/example-notion-breadcrumb
Label
Breadcrumb Trail
Problem
Users deep inside a hierarchy lose context: where am I, and how do I jump to a higher level without traversing back through every layer?
Solution
Render a single-line trail of ancestor links separated by a chevron or slash, with the current page rendered as plain text (non-link) at the end. Truncate middle segments with an ellipsis when the trail overflows.
Structure
<nav aria-label="Breadcrumb">
<ol role="list">
<li><a href="/">Home</a></li>
<li aria-hidden="true" class="sep">/</li>
<li><a href="/projects">Projects</a></li>
<li aria-hidden="true" class="sep">/</li>
<li>
<button aria-label="Show hidden ancestors" aria-haspopup="menu">...</button>
</li>
<li aria-hidden="true" class="sep">/</li>
<li>
<a href="/projects/web/issues">Issues</a>
</li>
<li aria-hidden="true" class="sep">/</li>
<li>
<span aria-current="page">PRM-1024 Fix login redirect</span>
</li>
</ol>
</nav>
Uses
- @community/method-heuristic-review
Behavior
- The current page is the last item, rendered as text (not a link), with
aria-current='page'. - When the trail overflows the container, collapse middle segments behind an ellipsis button that opens a menu listing them.
- Separators (chevrons, slashes) are decorative — render as
aria-hiddensiblings or via CSS pseudo-elements. - On narrow viewports, optionally show only the parent and current segments (back-button style).
- Long page titles in the current segment should truncate with ellipsis, not wrap.
A11y
- Wrap in
<nav aria-label='Breadcrumb'>and use an ordered list inside. - Mark the current page with
aria-current='page'; do not render it as a link. - Visual separators must be
aria-hidden='true'or generated via CSS — never spoken. - If using an ellipsis menu for collapsed segments, the trigger needs an accessible name like 'Show hidden ancestors'.
Compatible
- @community/pattern-sidebar-collapsible
Source
prime-system/examples/frontend-design/primes/compiled/@community/pattern-breadcrumb-trail/atom.yaml