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.

<script module lang="ts">
	<script lang="ts">
	  import { createBreadcrumbs } from 'svelte-crumbs';
	
	  const getBreadcrumbs = createBreadcrumbs();
	  const crumbs = $derived(await getBreadcrumbs());
	</script>
	
	<nav aria-label="Breadcrumbs" class="flex items-center gap-2 text-sm">
	  {#each crumbs as crumb, i (crumb.url)}
	    {#if i > 0}
	      <span aria-hidden="true">/</span>
	    {/if}
	    {#if i < crumbs.length - 1 || crumbs.length === 1}
	      <a href={crumb.url}>{crumb.label}</a>
	    {:else}
	      <span aria-current="page">{crumb.label}</span>
	    {/if}
	  {/each}
	</nav>
</script>

With icons

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

<script module lang="ts">
	<nav aria-label="Breadcrumbs" class="flex items-center gap-2 text-sm">
	  {#each crumbs as crumb, i (crumb.url)}
	    {#if i > 0}
	      <span aria-hidden="true">/</span>
	    {/if}
	    <span class="inline-flex items-center gap-1">
	      {#if crumb.icon}
	        {@const Icon = crumb.icon}
	        <Icon />
	      {/if}
	      {#if i < crumbs.length - 1 || crumbs.length === 1}
	        <a href={crumb.url}>{crumb.label}</a>
	      {:else}
	        <span aria-current="page">{crumb.label}</span>
	      {/if}
	    </span>
	  {/each}
	</nav>
</script>

Custom separators

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

<script module lang="ts">
	{#each crumbs as crumb, i (crumb.url)}
	  {#if i > 0}
	    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none"
	      stroke="currentColor" stroke-width="2">
	      <path d="M9 18l6-6-6-6" />
	    </svg>
	  {/if}
	  <a href={crumb.url}>{crumb.label}</a>
	{/each}
</script>

The crumbs array

Each entry in the array has the following shape:

<script module lang="ts">
	type Breadcrumb = {
	  label: string;       // resolved display text
	  url: string;         // the URL path for this segment
	  icon?: Component;    // optional Svelte component
	};
</script>