Breadcrumbs

Components breadcrumbs

A breadcrumb trail.

Markup

Drops in as data-pb-block="breadcrumbs".

html

<nav data-pb-block="breadcrumbs" class="pb-breadcrumbs" aria-label="Breadcrumb" style="font-family:inherit;font-size:0.875rem;color:var(--pb-muted,#64748b);">
  <ol style="list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;margin:0;padding:0;">
    <li><a href="/" style="color:var(--pb-muted,#64748b);text-decoration:none;">Home</a></li>
    <li aria-hidden="true">/</li>
    <li><a href="#" style="color:var(--pb-muted,#64748b);text-decoration:none;">Section</a></li>
    <li aria-hidden="true">/</li>
    <li aria-current="page" style="color:var(--pb-ink,#0f172a);font-weight:600;">Current</li>
  </ol>
</nav>

Settings

Interactive behaviour is built in; on top of that every block supports:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="breadcrumbs" so it imports as a labelled, editable component.
Interactive out of the box: Ships with Alpine state baked in (x-data, @click, x-show, x-transition) — open/close, tabs and toggles work with no wiring. These owner-authored blocks are trusted and keep their executable directives.