Getting Started

Installation

Install svelte-crumbs as a dependency:

pnpm install svelte-crumbs

Root layout

Call createBreadcrumbs() once in your root layout. It scans all pages, resolves the matching breadcrumbs for the current route, and returns a reactive array.

<script module lang="ts">
	import { createBreadcrumbs } from 'svelte-crumbs';
	const getBreadcrumbs = createBreadcrumbs();
	const crumbs = $derived(await getBreadcrumbs());
</script>

Source code and issues on GitHub.

Remote function breadcrumb

The label for this page is fetched server-side via a remote function — useful when the title isn't available in 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>