Svelte Breadcrumbs Made Easy

Using Load Functions (SSR)
- Creating the Segments
- The Breadcrumbs Component
Using a Global Store (CSR)
Using Page Module Exports (SSR)

Using Load Functions (SSR)

Creating the Segments

Making breadcrumbs base on routes is straightforward. In SvelteKit, +page.server.ts, +page.ts, +layout.server.ts, and +layout.ts load functions have an event parameter with an async parent() method that returns data from parent +layout.server.ts and +layout.ts load functions.

By placing a breadcrumbs array in the root layout, you can use event.parent() and Array.concat to append breadcrumbs at each route segment which requires a breadcrumb. And you can use data from that route segment to make the breadcrumb value and href dynamic.

Here is an example used on my Adventurers League Log Sheet app.

Root layout

export const load = async (event) => {
    return {
        breadcrumbs: [] as { name: string; href: string }[],
    };
};

First breadcrumb segment

export const load = async (event) => {
    const parent = await event.parent();

    return {
        breadcrumbs: parent.breadcrumbs.concat(
            {
                name: "Characters",
                href: "/characters"
            }
        )
    };

};

Next breadcrumb segment with param

import { getCharacter } from "$/server/data/characters";
import { error, redirect } from "@sveltejs/kit";

export const load = async (event) => {
    const parent = await event.parent();

    if (event.params.characterId === "new") throw redirect(301, "/characters/new/edit");
    const character = await getCharacter(event.params.characterId);
    if (!character) throw error(404, "Character not found");

    return {
        breadcrumbs: parent.breadcrumbs.concat(
            {
                name: character.name,
                href: `/characters/${character.id}`
            }
        )
    };
};

Now the resulting array in data.breadcrumbs for /characters/[characterId] is:

[
	{ name: "Characters", href: "/characters" },
	{ name: "Rimurus", href: "/characters/cl7gfkggq002009mluw41peqd" }
];

The Breadcrumbs Component

From there, you can create a breadcrumbs component like this:

svelte

<script lang="ts">
    import { page } from "$app/stores";
    import Icon from "./Icon.svelte";

    let breadcrumbs = ($page.data.breadcrumbs as { name: string, href?: string }[]).map((bc, i) => ({
        name: bc.name,
        href: !bc.href || i === $page.data.breadcrumbs.length - 1 ? null : bc.href,
    }));

</script>

<div class="breadcrumbs mb-4 hidden flex-1 text-sm sm:flex">
    <ul>
        <li>
            <Icon src="home" class="w-4" />
        </li>
        {#each breadcrumbs as bc}
            {#if bc.href}
                <li>
                    <a href={bc.href} class="text-secondary">
                        {bc.name}
                    </a>
                </li>
            {:else}
                <li class="overflow-hidden text-ellipsis whitespace-nowrap dark:drop-shadow-md">
                    {bc.name}
                </li>
            {/if}
        {/each}
    </ul>
</div>

Using a Global Store (CSR)

Leon Radley came up with a clever way to use $effect to create a global store that automatically adds and removes segments as layouts mount and unmount.

This method uses a SvelteMap, a reactive Map from Svelte, to hold the individual breadcrumb segments. When the setBreadcrumb function is called from a +layout.svelte file, the effect will insert the segment into the SvelteMap. When the layout unmounts during navigation, the effect cleanup function runs and the segment will be automatically removed.

The getBreadcrumbs function returns an array of breadcrumbs sorted by the number of path segments in the path property.

import { SvelteMap } from 'svelte/reactivity'

export interface Breadcrumb {
  path: string
  name: string
}

export interface BreadcrumbInternal extends Breadcrumb {
  count: number
}

const breadcrumbMap = new SvelteMap<string, BreadcrumbInternal>()

const breadcrumbs: Breadcrumb[] = $derived.by(() =>
Array.from(breadcrumbMap.values()).toSorted((a, b) => a.count - b.count),
)
export const getBreadcrumbs = (): Breadcrumb[] => breadcrumbs

export function setBreadcrumb(item: Breadcrumb) {
  $effect(() => {
    breadcrumbMap.set(item.path, { ...item, count: item.path.split('/').length })
    return () => {
      breadcrumbMap.delete(item.path)
    }
  })
}

svelte

<script lang="ts">
  import { setBreadcrumb } from '$lib/breadcrumb-state.svelte'
  import type { LayoutProps } from './$types'

const { children }: LayoutProps = $props()

setBreadcrumb({
name: 'Level 1',
path: '/level-1/',
})

</script>

{@render children()}

svelte

<script lang="ts">
  import { getBreadcrumbs } from './breadcrumb-state.svelte'
</script>

<nav class="breadcrumbs text-sm">
  <ul>
    {#each getBreadcrumbs() as breadcrumb (breadcrumb.path)}
      <li><a href={breadcrumb.path}>{breadcrumb.name}</a></li>
    {/each}
  </ul>
</nav>

Using Page Module Exports (SSR)

This method uses the import.meta.glob function to import the page modules and extract the pageTitle or getPageTitle function from each module. If a page module does not export a pageTitle or getPageTitle function, it will use the corresponding URL pathname segment to generate a title.

export type Crumb = {
	title: string;
	url: string;
};
export type ModuleData = {
	pageTitle?: string;
	getPageTitle?: (data: unknown) => string;
};

export const routeModules: Record<string, ModuleData> = import.meta.glob("/src/routes/**/+page.svelte", {
	eager: true
});

svelte

<script lang="ts">
	import { page } from "$app/state";
	import { routeModules, type Crumb, type ModuleData } from "$lib/modules";
	import BackButton from "./BackButton.svelte";

	export function titleSanitizer(title: string) {
		return title.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
	}

	function getPageTitleFromModule(module: ModuleData | undefined) {
		if (module?.pageTitle) return module.pageTitle;
		if (module?.getPageTitle) return module.getPageTitle(page.data);
		return undefined;
	}

	const crumbs = $derived.by(() => {
		let tmpCrumbs = [] as Crumb[];
		if (page.route.id) {
			let completeUrl = "";
			let completeRoute = "/src/routes";

			const routes = page.route.id.split(/(?<!\))\//).filter((p) => p != "");
			const paths = page.url.pathname.split("/").filter((p) => p != "");

			for (let i = 0; i < paths.length; i++) {
				let path = paths[i];
				let route = routes[i];
				if (!path || !route) continue;

				completeUrl += `/${path}`;
				completeRoute += `/${route}`;

				const routeModule = routeModules[`${completeRoute}/+page.svelte`];
				if (!routeModule) continue;

				tmpCrumbs.push({
					url: completeUrl,
					title: getPageTitleFromModule(routeModule) || titleSanitizer(path)
				});
			}
		} else {
			let completeUrl = "";
			const paths = page.url.pathname.split("/").filter((p) => p != "");
			for (let i = 0; i < paths.length; i++) {
				let path = paths[i];
				if (!path) continue;

				completeUrl += `/${path}`;
				tmpCrumbs.push({
					title: titleSanitizer(path),
					url: completeUrl
				});
			}
		}
		return tmpCrumbs;
	});
</script>

<div class={["flex min-h-9 flex-1 items-center max-sm:min-h-8 sm:mb-4", crumbs.length === 1 && "max-sm:hidden"]}>
	{#if crumbs.length > 0}
		{@const back = crumbs.at(-2)}
		{#if back?.url && crumbs.length > 1}
			<div class="flex-1 sm:hidden">
				<BackButton href={back.url}>{back.title}</BackButton>
			</div>
		{/if}
		<div class="breadcrumbs flex-1 text-sm max-sm:hidden print:hidden">
			<ul class="h-5">
				<li>
					<span class="iconify mdi--home size-4"></span>
				</li>
				{#each crumbs as bc, i (i)}
					{#if bc.url && bc.title && !["/characters/new"].includes(bc.url)}
						{#if bc.url !== crumbs.at(-1)?.url}
							<li>
								<a href={bc.url} class="text-secondary-content">
									{bc.title}
								</a>
							</li>
						{:else}
							<li class="ellipsis-nowrap dark:drop-shadow-md">
								{bc.title}
							</li>
						{/if}
					{/if}
				{/each}
			</ul>
		</div>
	{/if}
</div>

svelte

<script lang="ts" module>
  export const pageTitle = "Characters";
  // or
  import type { PageData } from "./$types.js";
	export function getPageTitle(data: Partial<PageData>) {
		return {
			title: `${data.user?.name}'s Characters`
		};
	}
</script>

Table of Contents

Using Load Functions (SSR)

Creating the Segments

Root layout

First breadcrumb segment

Next breadcrumb segment with param

The Breadcrumbs Component

Using a Global Store (CSR)

Using Page Module Exports (SSR)