Breadcrumb

Example

<nav aria-label="Breadcrumb" data-slean="breadcrumb">
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/primitives">Primitives</a></li>
		<li><a href="/primitives/breadcrumb" aria-current="page">Breadcrumb</a></li>
	</ol>
</nav>

<script lang="ts">
	// Nothing to import at runtime: the trail is links. The stylesheet is optional.
	import '@svelte-lean/styles/breadcrumb.css';
</script>

<nav aria-label="Breadcrumb" data-slean="breadcrumb">
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/primitives">Primitives</a></li>
		<li><a href="/primitives/breadcrumb" aria-current="page">Breadcrumb</a></li>
	</ol>
</nav>

Why this implementation exists

A breadcrumb is links in a list inside a navigation landmark, which the WAI-ARIA Authoring Practices spell out: a named <nav>, an <ol>, and aria-current="page" on the last item. Nothing in it needs a script.

The one part that goes wrong in markup is the separator: a typed “/” or “>” is read aloud between every level. breadcrumb.css draws the separators as bordered ::before boxes with no text, mirrored under RTL, so the markup holds only the links.

Usage

The markup needs no package. Install @svelte-lean/styles for the stylesheet; @svelte-lean/primitives adds the typed contract and nothing at runtime.

npm install @svelte-lean/styles

pnpm add @svelte-lean/styles

yarn add @svelte-lean/styles

bun add @svelte-lean/styles

import '@svelte-lean/styles/breadcrumb.css';

Name the landmark with aria-label="Breadcrumb" (or aria-labelledby), list the levels in an <ol> directly inside it, and mark the last item with aria-current="page".

Do not type separators into the markup; the stylesheet draws them.

Anatomy

Runtime profile

Tier 0: the breadcrumb has no behavior module, the Vite plugin maps breadcrumb to no module, and the page ships no Svelte Lean JavaScript for it.

Accessibility contract

• A named <nav> landmark, told apart from the page’s other navigation by its name.
• An <ol>: screen readers announce the number of levels.
• aria-current="page" on the current page, a link or a span.
• The separators are empty generated boxes: not in the text, not announced.

Keyboard

Platform features

Without JavaScript

Fully functional: the levels are plain links.

Server rendering

Static markup, rendered with the page from its route.

Before hydration

Nothing is attached; the links work before and after hydration alike.

Styling

breadcrumb.css lays the items out in a wrapping row, draws each separator as a chevron with two borders on li + li::before (turned toward the inline end and mirrored under :dir(rtl)), mutes the ancestors and sets the current page in the text color. Links get the shared focus ring and, on a coarse pointer, the small control height. The rules use child combinators, so a list nested in an item keeps its own styles. The tokens it reads:

State selectors the stylesheet targets, all from the platform or ARIA: :dir(rtl), :focus-visible, :hover, [aria-current="page"], [href].

Controlled integration

The application owns the trail. In SvelteKit it can come from the route: one level per path segment, the last one current.

<script lang="ts">
	import { page } from '$app/state';

	// A trail from the route: one level per path segment, the last one current.
	const trail = $derived.by(() => {
		const segments = page.url.pathname.split('/').filter(Boolean);
		return [
			{ href: '/', label: 'Home' },
			...segments.map((segment, i) => ({
				href: '/' + segments.slice(0, i + 1).join('/'),
				label: segment.replaceAll('-', ' ')
			}))
		];
	});
</script>

<nav aria-label="Breadcrumb" data-slean="breadcrumb">
	<ol>
		{#each trail as level, i (level.href)}
			<li>
				<a href={level.href} aria-current={i === trail.length - 1 ? 'page' : undefined}>
					{level.label}
				</a>
			</li>
		{/each}
	</ol>
</nav>

Compatibility notes

The elements and aria-current are widely available. The chevrons use the rotate property (Baseline 2022) and :dir() (Baseline 2023); without the first a separator is an unturned corner, without the second the chevrons point right under RTL as well.

Examples

Current page as text

The pattern makes the current page a link with aria-current="page". When it should not be a link, a <span aria-current="page"> is styled the same way.

<nav aria-label="Breadcrumb" data-slean="breadcrumb">
	<ol>
		<li><a href="/">Home</a></li>
		<li><a href="/table">Table</a></li>
		<li><span aria-current="page">Pagination</span></li>
	</ol>
</nav>

Testing

• apps/playground/tests/primitives/feedback-navigation.spec.ts Playwright: roles, names and states in the accessibility tree, keyboard, RTL, reduced motion, axe
• packages/styles/tests static checks of the stylesheet (layers, tokens, specificity, dark parity)

Source

• packages/primitives/src/breadcrumb/contract.md the contract in prose: semantics, keyboard, focus, ARIA, SSR, JS-disabled behavior
• packages/primitives/src/breadcrumb/contract.ts typed constants: name, tier, base, parts, options, events
• packages/styles/css/breadcrumb.css the optional stylesheet