API Reference

BreadcrumbMeta

Each +page.svelte can export a breadcrumb constant of type BreadcrumbMeta. It's an async function that receives the current page and returns a {label, icon?} object.

Static label

Return a fixed string — the simplest pattern.

<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 function.

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

Remote function

Call a server-side remote function inside the resolver — works with SSR and 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

Combine a query with a command and .withOverride() for instant client-side updates.

<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>

No breadcrumb

Omit the export entirely — the route is simply skipped in the breadcrumb trail.

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>