API Reference

BreadcrumbMeta

Any +page.svelte can export a breadcrumb of type BreadcrumbMeta: an async function that takes the current page and returns {label, icon?}.

Static label

Return a fixed string.

<script module lang="ts">
	export const breadcrumb: BreadcrumbMeta = async () => ({
	  label: 'Products'
	});
</script>

Dynamic from load data

Read the label from page.data, populated by a layout or page load. See Product #42.

<script module lang="ts">
	export const breadcrumb: BreadcrumbMeta = async (page) => ({
	  label: page.data.product.name
	});
</script>

Remote function

Call a remote function inside the resolver. SSR-safe, and it doesn't block hydration.

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

Optimistic update

Pair a query with a command and .withOverride() — the label changes before the server answers. See Playground.

<script module lang="ts">
	import { getNickname, setNickname } from '$lib/greeting.remote.js';
	
	// breadcrumb reads from a query
	export const breadcrumb: BreadcrumbMeta = async () => ({
	  label: await getNickname()
	});
	
	// update with optimistic override — no round-trip
	setNickname(value).updates(getNickname().withOverride(() => value));
</script>

Spread / catch-all routes

The { routes } form defines breadcrumbs for several route patterns from one [...rest] page. The second argument (url) is the breadcrumb's own path, not the full URL. See Spread routes.

<script module lang="ts">
	export const breadcrumb: BreadcrumbMeta = {
	  routes: {
	    '/spread': async () => ({ label: 'Spread' }),
	    '/spread/[...rest]': async (_page, url) => ({
	      label: url.split('/').pop() ?? 'overview'
	    })
	  }
	};
</script>

Another route's trail

Pass route to walk a route other than the current one, for a view that shows another route's content, such as a modal or a preview. Resolvers receive that route's id and params.

const crumbs = $derived(
  await getCrumbs({ route: { id: '/products/[productId]', params: { productId: '42' } } })
);

No breadcrumb

Omit the export — the segment is skipped. See About.

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>