Static breadcrumbs

svelte-crumbs is headless — it gives you a reactive crumbs array and leaves rendering entirely up to you. The simplest approach is a plain {#each} loop with no transitions. Toggle "Animate breadcrumbs" in the sidebar to compare with the animated version.

Basic example

Iterate over the crumbs array, render links for intermediate segments, and mark the last segment as the current page.

With icons

Each crumb can optionally include an icon — a Svelte component you return from your breadcrumb resolver. Render it alongside the label.

Custom separators

Since you own the markup, use any separator you like — arrows, chevrons, dots, or custom SVGs.

The crumbs array

Each entry in the array has the following shape: