svelte-crumbs v2.0.2

SvelteKit navigation

Server-rendered breadcrumbs.

Resolved during SSR, reactive after hydration. Zero config.

Read the docs npm i svelte-crumbs
+layout.svelte
<script lang="ts">
  import { getCrumbs } from 'svelte-crumbs';

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

Zero config

No route table. Pages describe themselves.

02

SSR-ready

Resolves in top-level await. No {#await} blocks, no flash.

03

Reactive

Remote functions and optimistic queries, tracked.

One export per page.

Return a label from anything you can await — load data, a remote function, a query.

products/[id]/+page.svelte
<script module lang="ts">
  import type { BreadcrumbMeta } from 'svelte-crumbs';

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

Live routes

/products/42/docs/getting-started/spread/users/42/settings/playground