Breadcrumbs

The built-in breadcrumbs tag — a breadcrumb trail from a JSON or compact pipe-delimited list of crumbs, on Mantine's Breadcrumbs. Usage, options, and live examples.

A built-in tag for a breadcrumb trail, built on Mantine’s Breadcrumbs. Pass the crumbs in items — either a compact comma-separated list of Label | /href pairs or a JSON array of {label, href} objects — and set the separator. A crumb with no href (typically the last, current one) renders as plain “you are here” text.

Use it as {% breadcrumbs %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'breadcrumbs', …).

Demonstrations

Compact form

The compact form is a comma-separated list of Label | /href pairs. Drop the | href on a crumb to render it as plain text — the last (current) crumb usually has no link.

JSON form

The JSON form is an array of {label, href} objects — handy when a label itself contains a comma or a pipe. Omit href to render a crumb as plain text.

Separator and spacing

separator sets the character drawn between crumbs (defaults to /); separatorMargin sets the space around it — a Mantine size (xs–xl) or any CSS value.

With other components

Build a trail in Python from a list of pages — the loop-friendly form — and pair it with other built-ins. Here the crumbs are assembled into the compact string before the tag is called.

Attributes

Omit any attribute to take its default.

CSS Selectors

The trail renders inside an island wrapper carrying data-aardvark-island="Breadcrumbs", with Mantine’s Styles API classes on the row, each crumb, and the separator between them.

[data-aardvark-island="Breadcrumbs"]  /* the island wrapper */
.mantine-Breadcrumbs-root             /* the crumb row */
.mantine-Breadcrumbs-breadcrumb       /* a single crumb */
.mantine-Breadcrumbs-separator        /* the divider between crumbs */

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) onto the rendered trail.