Getting Started

Installation

Install the package:

pnpm install svelte-crumbs

Root layout

Call getCrumbs() in your root layout. It matches the current route against your pages and returns the resolved breadcrumb trail as a reactive array.

<script lang="ts">
  import { getCrumbs } from 'svelte-crumbs';

  const crumbs = $derived(await getCrumbs());
</script>

Vite plugin (recommended)

Add crumbs() before sveltekit(). Loading a crumb then fetches only the page's <script module>, a few hundred bytes, instead of the whole page and its dependencies.

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { crumbs } from 'svelte-crumbs/vite';
import { defineConfig } from 'vite';

export default defineConfig({ plugins: [crumbs(), sveltekit()] });

A page whose module script holds state (let, $state, new Map()) or runs code at load isn't split, because the split copy wouldn't share that state with the component. The build warns and loads that page whole. Move the state into its own .svelte.ts file to split it.

Source code and issues on GitHub.

Remote function breadcrumb

The crumb for this page — up in the trail above — comes from a remote function, for titles that never reach load data.

<script module lang="ts">
	import { getDocTitle } from '$lib/demo/docs.remote.js';
	
	export const breadcrumb: BreadcrumbMeta = async (page) => ({
	  label: await getDocTitle(page.params.slug ?? '')
	});
</script>