Examples
Basic
Standard hierarchy: home → ... → current page. Each crumb except the last is a link; the last is marked current.
Without home link
Omit href on the first crumb to render it as plain text instead of a link. Useful when the home node isn't navigable from the current view (e.g. the user came from a deep link).
With heading
heading=true wraps the current crumb in an h1 — the breadcrumb doubles as the page title for screen readers. Skip a separate page title row when using this pattern.
With dropdown
isDropdown=true swaps the crumb's link for a menu toggle. The dropdown slot holds a PF v6 menu. Useful when a level has many sibling pages users might want to jump between.
Auto-generated
Pass a crumbs list instead of writing items by hand. The route builds the trail
server-side from the request path with
BreadcrumbTrail.fromPath("/components/breadcrumb") — a "Home" root, a link per ancestor
segment, and the last segment marked current. Unmapped segments are humanized; pass a label map for custom names.
With buttons
Breadcrumb items as button elements instead of links — for wizard-like in-page navigation.
Documentation
Breadcrumb props
Parameters accepted by
{#include components/navigation/breadcrumb ... /}. Model mode: pass
breadcrumb=<Breadcrumb> built in Java instead — the Java tab on each example
shows the builder. Crumbs live in the items slot (named that way to avoid colliding
with example-card's content slot — see the runtime template comment for the
StackOverflowError that the obvious naming would have caused).
Required: id. Optional:
ariaLabel (default "Breadcrumb"),
crumbs (a server-built list for auto mode — each entry has
text, optional href, and
current=true on the active crumb only). When crumbs is set
the items slot is ignored. Slot: items —
one or more breadcrumb-item includes (manual mode).
BreadcrumbItem props
Parameters accepted by
{#include components/navigation/breadcrumb-item ... /}.
Required: the crumb label is the include body (default content slot). Link target:
href renders an <a>; omit for plain text.
target sets the link target (e.g. "_blank").
Status: current=true marks the active crumb (pf-m-current +
aria-current="page"). Heading variant: heading=true wraps the current
crumb in <h1>. Dropdown variant:
isDropdown=true renders a menu toggle instead of a link. Provide the menu markup in the
dropdown slot. dropdownId is required for the dropdown
variant — it wires aria-controls between the toggle and the menu panel.
Divergence from PF React. We skip component /
render / to (React routing concerns) and
className. PF auto-injects a showDivider on all but the
first crumb; our runtime always emits a divider span (PF's CSS hides the first divider visually via
:first-child selectors).
Usage
Pick one current pattern. Either mark the final crumb with
current=true (plain styling) or heading=true (h1 wrapper).
Don't combine — the heading variant already implies current state, and the markup gets confused.
Dropdown items need stable ids. Pass an explicit
dropdownId
on the dropdown crumb if you'll target it from another part of the page (e.g. for HTMX swaps or JS focus
management). Otherwise the runtime generates one from the text, which may collide if two crumbs share text.
Dropdown content is your responsibility. The dropdown slot wraps the menu in PF v6's
pf-v6-c-menu chrome but the inner items are hand-coded (typically
<a class="pf-v6-c-menu__item">...</a>). The phaBreadcrumbDropdown Alpine
component handles open/close + click-away dismissal.
Slot-name collisions. Both the container's items slot and the item's
dropdown slot use role-specific names rather than generic
content. Re-using content would recurse infinitely (see
the runtime template comments).