refrakt.mdBreadcrumb
Navigation breadcrumbs from a list of links. Each linked item is a navigable breadcrumb, and the last item (without a link) represents the current page.
Basic usage
A breadcrumb trail using the default / separator.
{% breadcrumb %}
- [Home](/)
- [Getting started](/docs/getting-started)
- [Tabs](/runes/tabs)
- Breadcrumb
{% /breadcrumb %}<nav data-rune="breadcrumb" typeof="BreadcrumbList">
<meta content="/" data-field="separator">
<ol data-name="items">
<li data-rune="breadcrumb-item" typeof="ListItem" property="itemListElement">
<span hidden data-field="name" property="name">Home</span>
<a href="/" data-field="url" property="item">Home</a>
<meta content="1" property="position">
</li>
<li data-rune="breadcrumb-item" typeof="ListItem" property="itemListElement">
<span hidden data-field="name" property="name">Getting started</span>
<a href="/docs/getting-started" data-field="url" property="item">Getting started</a>
<meta content="2" property="position">
</li>
<li data-rune="breadcrumb-item" typeof="ListItem" property="itemListElement">
<span hidden data-field="name" property="name">Tabs</span>
<a href="/runes/tabs" data-field="url" property="item">Tabs</a>
<meta content="3" property="position">
</li>
<li data-rune="breadcrumb-item" typeof="ListItem" property="itemListElement">
<span data-field="name" property="name">Breadcrumb</span>
<meta content="4" property="position">
</li>
</ol>
</nav><nav typeof="BreadcrumbList" class="rf-breadcrumb" data-separator="/" data-rune="breadcrumb" data-density="minimal" style="--separator: "/"">
<ol data-name="items" class="rf-breadcrumb__items">
<li typeof="ListItem" class="rf-breadcrumb-item" property="itemListElement" data-rune="breadcrumb-item" data-density="full">
<span hidden data-field="name" property="name">Home</span>
<a href="/" data-field="url" property="item">Home</a>
<meta content="1" property="position" />
</li>
<li typeof="ListItem" class="rf-breadcrumb-item" property="itemListElement" data-rune="breadcrumb-item" data-density="full">
<span hidden data-field="name" property="name">Getting started</span>
<a href="/docs/getting-started" data-field="url" property="item">Getting started</a>
<meta content="2" property="position" />
</li>
<li typeof="ListItem" class="rf-breadcrumb-item" property="itemListElement" data-rune="breadcrumb-item" data-density="full">
<span hidden data-field="name" property="name">Tabs</span>
<a href="/runes/tabs" data-field="url" property="item">Tabs</a>
<meta content="3" property="position" />
</li>
<li typeof="ListItem" class="rf-breadcrumb-item" property="itemListElement" data-rune="breadcrumb-item" data-density="full">
<span data-field="name" property="name">Breadcrumb</span>
<meta content="4" property="position" />
</li>
</ol>
</nav>Custom separator
Use the separator attribute to change the divider between items.
{% breadcrumb separator="›" %}
- [Home](/)
- [Getting started](/docs/getting-started)
- Current page
{% /breadcrumb %}<nav data-rune="breadcrumb" typeof="BreadcrumbList">
<meta content="›" data-field="separator">
<ol data-name="items">
<li data-rune="breadcrumb-item" typeof="ListItem" property="itemListElement">
<span hidden data-field="name" property="name">Home</span>
<a href="/" data-field="url" property="item">Home</a>
<meta content="1" property="position">
</li>
<li data-rune="breadcrumb-item" typeof="ListItem" property="itemListElement">
<span hidden data-field="name" property="name">Getting started</span>
<a href="/docs/getting-started" data-field="url" property="item">Getting started</a>
<meta content="2" property="position">
</li>
<li data-rune="breadcrumb-item" typeof="ListItem" property="itemListElement">
<span data-field="name" property="name">Current page</span>
<meta content="3" property="position">
</li>
</ol>
</nav><nav typeof="BreadcrumbList" class="rf-breadcrumb" data-separator="›" data-rune="breadcrumb" data-density="minimal" style="--separator: "›"">
<ol data-name="items" class="rf-breadcrumb__items">
<li typeof="ListItem" class="rf-breadcrumb-item" property="itemListElement" data-rune="breadcrumb-item" data-density="full">
<span hidden data-field="name" property="name">Home</span>
<a href="/" data-field="url" property="item">Home</a>
<meta content="1" property="position" />
</li>
<li typeof="ListItem" class="rf-breadcrumb-item" property="itemListElement" data-rune="breadcrumb-item" data-density="full">
<span hidden data-field="name" property="name">Getting started</span>
<a href="/docs/getting-started" data-field="url" property="item">Getting started</a>
<meta content="2" property="position" />
</li>
<li typeof="ListItem" class="rf-breadcrumb-item" property="itemListElement" data-rune="breadcrumb-item" data-density="full">
<span data-field="name" property="name">Current page</span>
<meta content="3" property="position" />
</li>
</ol>
</nav>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
separator | string | '/' | Character displayed between breadcrumb items |
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |