Skip to main content
xoji

Breadcrumb
Info:Navigation html svelte astro Success: coverage 38/38

A hierarchy trail showing where a page sits, with linked ancestors and a marked current location.

Live demo

live · @xoji/astro

Breadcrumb

A path through the app

The last crumb is marked aria-current="page" automatically.

Every tone

The link tone tracks the active register — any tone in the roster, drawn at its panel-readable --{tone}-vivid ink.

Accents
tone="accent"
tone="accent-2"
tone="accent-3"
tone="accent-4"
tone="neutral"

Statuses
tone="success"
tone="info"
tone="warn"
tone="danger"

Named hues
tone="red"
tone="orange"
tone="yellow"
tone="green"
tone="blue"
tone="purple"
tone="brown"
tone="pink"
tone="cyan"
tone="gray"
tone="white"
tone="black"

Sizes

Three steps, scaled against the type ramp.
Small
Medium (default)
Large

Custom separator

Any string works — swap the slash for a chevron.

Breadcrumb renders a location trail: an ordered list of ancestor links ending in the current page, with a separator glyph between each step. It is a <nav> landmark labeled "Breadcrumb" wrapping an <ol>; ancestors render as anchors and the final crumb renders as plain text carrying aria-current="page".

Pass the trail declaratively via the items array (each entry is { label, href?, current? }) and the engine builds the list, injects the separators, and marks the last item current. The separator glyph defaults to / and is purely decorative. A tone tints the ancestor links and three sizes scale the type. For fully custom crumbs, omit items and provide your own <li> markup in the default slot.

When to use

How this component composes with the rest of the set.

Place at the top of a page or panel, above the Heading, to anchor where the user is.
Pair with a Link or Button home action for the root crumb when you need richer affordances than a plain anchor.
For app chrome, sits naturally inside a Toolbar's start group.

Props

5 props, straight from the manifest.

PropTypeDefaultBindingsDescription
items BreadcrumbItem[] —
html svelte astro
The trail, ordered root → current. Each item is `{ label, href?, current? }`. Items with an `href` (and not current) render as links; the last item, or any item with `current: true`, renders as the current page. In the HTML binding this is a JSON-string attribute.
separator string /
html svelte astro
The glyph drawn between crumbs; decorative and hidden from assistive technology.
tone FullTone
accent neutral danger success warn info accent-2 accent-3 accent-4 red orange yellow green blue purple brown pink cyan gray white black
accent
html svelte astro
Color tinting the ancestor links — any tone in the roster: a semantic role, an accent variant, or a named hue.
size Size
sm md lg
md
html svelte astro
Type scale of the trail.
label string Breadcrumb
html svelte astro
The accessible name of the `<nav>` landmark.

Appearance

Variants

accent

 .xoji-breadcrumb--accent

Ancestor links tinted with the accent tone (the default).

neutral

 .xoji-breadcrumb--neutral

Ancestor links in neutral ink for a quieter trail.

Sizes

sm
.xoji-breadcrumb--sm

Compact.

md

 default
.xoji-breadcrumb

Default.

lg
.xoji-breadcrumb--lg

Large.

States

hover

 .xoji-breadcrumb__link:hover

Pointer over an ancestor link; it underlines.

focus-visible

 .xoji-breadcrumb__link:focus-visible

Keyboard focus on a link: a token-colored ring, plus a transparent outline promoted to a real one in forced-colors mode.

Anatomy

The named parts that make up the component, with their selectors.

breadcrumb

 .xoji-breadcrumb

The <nav> landmark wrapping the trail, carrying the tone and size classes.
--font-sans --text-sm --leading-normal --fg-2

list

 .xoji-breadcrumb__list

The ordered list laying the crumbs and separators out in a wrapping row.
--space-1

item

 .xoji-breadcrumb__link, .xoji-breadcrumb__current

An ancestor link (anchor) or the current crumb (text). Links tint with the tone; the current crumb is bold neutral ink.
--accent-vivid --fg-0 --weight-medium --radius-sm --space-0 --space-1

separator

 .xoji-breadcrumb__separator

The decorative glyph between crumbs, hidden from assistive tech.
--fg-3

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 38/38 consumed tokens produced default register: 276 tokens

Live coverage check against the xoji-default register (derive(xojiDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--accent-2-vivid --accent-3-vivid --accent-4-vivid --accent-vivid --black-vivid --blue-vivid --border-normal --border-thick --brown-vivid --cyan-vivid --danger-vivid --duration-fast --ease-standard --fg-0 --fg-2 --fg-3 --font-sans --gray-vivid --green-vivid --info-vivid --leading-normal --neutral-vivid --orange-vivid --pink-vivid --purple-vivid --radius-sm --red-vivid --ring --space-0 --space-1 --success-vivid --text-body --text-sm --text-xs --warn-vivid --weight-medium --white-vivid --yellow-vivid

Slots
default
html svelte astro

Custom crumb markup (<li> items and separators) used when items is omitted.

Accessibility
Renders a <nav> landmark with an accessible name (aria-label, default "Breadcrumb") so screen readers can jump to and announce the trail.
The trail is an ordered list (<ol>), conveying sequence and position to assistive technology.
The current page is plain text marked aria-current="page", not a link. It is the destination, not a navigation target.
Separators are decorative and aria-hidden, so they are never read aloud between crumbs.
Link focus is shown with a token ring plus a transparent outline that the forced-colors base rule promotes to a real system outline.

Code

A location trail

An ordered trail of linked ancestors ending in the current page; tone and separator are adjustable.

 
<xoji-breadcrumb
	items='[
		{"label":"Home","href":"/"},
		{"label":"Library","href":"/library"},
		{"label":"Themes"}
	]'
></xoji-breadcrumb>

<xoji-breadcrumb tone="neutral" separator="›" items='[
	{"label":"Docs","href":"/docs"},
	{"label":"Components","href":"/docs/components"},
	{"label":"Breadcrumb"}
]'></xoji-breadcrumb>

<xoji-breadcrumb label="You are here">
	<li class="xoji-breadcrumb__item"><a class="xoji-breadcrumb__link" href="/">Home</a></li>
	<li class="xoji-breadcrumb__separator" aria-hidden="true">/</li>
	<li class="xoji-breadcrumb__item"><span class="xoji-breadcrumb__current" aria-current="page">Settings</span></li>
</xoji-breadcrumb>
 
<script lang="ts">
	import { Breadcrumb } from "@xoji/svelte";

	const trail = [
		{ label: "Home", href: "/" },
		{ label: "Library", href: "/library" },
		{ label: "Themes" },
	];
</script>

<Breadcrumb items={trail} />

<Breadcrumb tone="neutral" separator="›" items={trail} />
 
---
import { Breadcrumb } from "@xoji/astro";

const trail = [
	{ label: "Home", href: "/" },
	{ label: "Library", href: "/library" },
	{ label: "Themes" },
];
---

<Breadcrumb items={trail} />

<Breadcrumb tone="neutral" separator="›" items={trail} />