Docs
Breadcrumb
Breadcrumb
Displays the path to the current resource using a hierarchy of links.
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<DropdownMenu.Root>
<DropdownMenu.Trigger class="flex items-center gap-1">
<Breadcrumb.Ellipsis class="size-4" />
<span class="sr-only">Toggle menu</span>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="start">
<DropdownMenu.Item>Documentation</DropdownMenu.Item>
<DropdownMenu.Item>Themes</DropdownMenu.Item>
<DropdownMenu.Item>GitHub</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<DropdownMenu.Root>
<DropdownMenu.Trigger class="flex items-center gap-1">
<Breadcrumb.Ellipsis class="size-4" />
<span class="sr-only">Toggle menu</span>
</DropdownMenu.Trigger>
<DropdownMenu.Content align="start">
<DropdownMenu.Item>Documentation</DropdownMenu.Item>
<DropdownMenu.Item>Themes</DropdownMenu.Item>
<DropdownMenu.Item>GitHub</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
Installation
npx shadcn-svelte@next add breadcrumb
Copy and paste the component source files linked at the top of this page into your project.
Usage
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
Examples
Custom separator
Use a custom component in the <slot> of <Breadcrumb.Separator /> to create a custom separator.
<script lang="ts">
import Slash from "lucide-svelte/icons/slash";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
<script lang="ts">
import Slash from "lucide-svelte/icons/slash";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
Dropdown
You can compose <Breadcrumb.Item /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.
<script lang="ts">
import ChevronDown from "lucide-svelte/icons/chevron-down";
import Slash from "lucide-svelte/icons/slash";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<DropdownMenu.Root>
<DropdownMenu.Trigger class="flex items-center gap-1">
Components
<ChevronDown />
</DropdownMenu.Trigger>
<DropdownMenu.Content align="start">
<DropdownMenu.Item>Documentation</DropdownMenu.Item>
<DropdownMenu.Item>Themes</DropdownMenu.Item>
<DropdownMenu.Item>GitHub</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
<script lang="ts">
import ChevronDown from "lucide-svelte/icons/chevron-down";
import Slash from "lucide-svelte/icons/slash";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<DropdownMenu.Root>
<DropdownMenu.Trigger class="flex items-center gap-1">
Components
<ChevronDown class="size-4" />
</DropdownMenu.Trigger>
<DropdownMenu.Content align="start">
<DropdownMenu.Item>Documentation</DropdownMenu.Item>
<DropdownMenu.Item>Themes</DropdownMenu.Item>
<DropdownMenu.Item>GitHub</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
</Breadcrumb.Item>
<Breadcrumb.Separator>
<Slash />
</Breadcrumb.Separator>
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
Collapsed
We provide a <Breadcrumb.Ellipsis /> component to show a collapsed state when the breadcrumb is too long.
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Ellipsis />
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Ellipsis />
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
Link component
To use a custom link component from your routing library, you can use the asChild prop on <Breadcrumb.Link />.
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
<script lang="ts">
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Link href="/components">Components</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>
Responsive
Here's an example of a responsive breadcrumb that composes <Breadcrumb.Item /> with <Breadcrumb.Ellipsis />, <DropdownMenu />, and <Drawer />.
It displays a dropdown on desktop and a drawer on mobile.
<script lang="ts">
import { MediaQuery } from "svelte/reactivity";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import * as Drawer from "$lib/components/ui/drawer/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { buttonVariants } from "$lib/components/ui/button/index.js";
const items = [
{ href: "#", label: "Home" },
{ href: "#", label: "Documentation" },
{ href: "#", label: "Building Your Application" },
{ href: "#", label: "Data Fetching" },
{ label: "Caching and Revalidating" }
];
const ITEMS_TO_DISPLAY = 3;
let open = $state(false);
const isDesktop = new MediaQuery("(min-width: 768px)");
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href={items[0].href}>
{items[0].label}
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
{#if items.length > ITEMS_TO_DISPLAY}
<Breadcrumb.Item>
{#if isDesktop.current}
<DropdownMenu.Root bind:open>
<DropdownMenu.Trigger
class="flex items-center gap-1"
aria-label="Toggle menu"
>
<Breadcrumb.Ellipsis class="size-4" />
</DropdownMenu.Trigger>
<DropdownMenu.Content align="start">
{#each items.slice(1, -2) as item}
<DropdownMenu.Item>
<a href={item.href ? item.href : "#"}>
{item.label}
</a>
</DropdownMenu.Item>
{/each}
</DropdownMenu.Content>
</DropdownMenu.Root>
{:else}
<Drawer.Root bind:open>
<Drawer.Trigger aria-label="Toggle Menu">
<Breadcrumb.Ellipsis class="size-4" />
</Drawer.Trigger>
<Drawer.Content>
<Drawer.Header class="text-left">
<Drawer.Title>Navigate to</Drawer.Title>
<Drawer.Description>
Select a page to navigate to.
</Drawer.Description>
</Drawer.Header>
<div class="grid gap-1 px-4">
{#each items.slice(1, -2) as item}
<a href={item.href ? item.href : "#"} class="py-1 text-sm">
{item.label}
</a>
{/each}
</div>
<Drawer.Footer class="pt-4">
<Drawer.Close class={buttonVariants({ variant: "outline" })}>
Close
</Drawer.Close>
</Drawer.Footer>
</Drawer.Content>
</Drawer.Root>
{/if}
</Breadcrumb.Item>
<Breadcrumb.Separator />
{/if}
{#each items.slice(-ITEMS_TO_DISPLAY + 1) as item}
<Breadcrumb.Item>
{#if item.href}
<Breadcrumb.Link
href={item.href}
class="max-w-20 truncate md:max-w-none"
>
{item.label}
</Breadcrumb.Link>
<Breadcrumb.Separator />
{:else}
<Breadcrumb.Page class="max-w-20 truncate md:max-w-none">
{item.label}
</Breadcrumb.Page>
{/if}
</Breadcrumb.Item>
{/each}
</Breadcrumb.List>
</Breadcrumb.Root>
<script lang="ts">
import { MediaQuery } from "svelte/reactivity";
import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
import * as Drawer from "$lib/components/ui/drawer/index.js";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import { buttonVariants } from "$lib/components/ui/button/index.js";
const items = [
{ href: "#", label: "Home" },
{ href: "#", label: "Documentation" },
{ href: "#", label: "Building Your Application" },
{ href: "#", label: "Data Fetching" },
{ label: "Caching and Revalidating" }
];
const ITEMS_TO_DISPLAY = 3;
let open = $state(false);
const isDesktop = new MediaQuery("(min-width: 768px)");
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href={items[0].href}>
{items[0].label}
</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
{#if items.length > ITEMS_TO_DISPLAY}
<Breadcrumb.Item>
{#if isDesktop.current}
<DropdownMenu.Root bind:open>
<DropdownMenu.Trigger
class="flex items-center gap-1"
aria-label="Toggle menu"
>
<Breadcrumb.Ellipsis class="size-4" />
</DropdownMenu.Trigger>
<DropdownMenu.Content align="start">
{#each items.slice(1, -2) as item}
<DropdownMenu.Item>
<a href={item.href ? item.href : "#"}>
{item.label}
</a>
</DropdownMenu.Item>
{/each}
</DropdownMenu.Content>
</DropdownMenu.Root>
{:else}
<Drawer.Root bind:open>
<Drawer.Trigger aria-label="Toggle Menu">
<Breadcrumb.Ellipsis class="size-4" />
</Drawer.Trigger>
<Drawer.Content>
<Drawer.Header class="text-left">
<Drawer.Title>Navigate to</Drawer.Title>
<Drawer.Description>
Select a page to navigate to.
</Drawer.Description>
</Drawer.Header>
<div class="grid gap-1 px-4">
{#each items.slice(1, -2) as item}
<a href={item.href ? item.href : "#"} class="py-1 text-sm">
{item.label}
</a>
{/each}
</div>
<Drawer.Footer class="pt-4">
<Drawer.Close class={buttonVariants({ variant: "outline" })}>
Close
</Drawer.Close>
</Drawer.Footer>
</Drawer.Content>
</Drawer.Root>
{/if}
</Breadcrumb.Item>
<Breadcrumb.Separator />
{/if}
{#each items.slice(-ITEMS_TO_DISPLAY + 1) as item}
<Breadcrumb.Item>
{#if item.href}
<Breadcrumb.Link
href={item.href}
class="max-w-20 truncate md:max-w-none"
>
{item.label}
</Breadcrumb.Link>
<Breadcrumb.Separator />
{:else}
<Breadcrumb.Page class="max-w-20 truncate md:max-w-none">
{item.label}
</Breadcrumb.Page>
{/if}
</Breadcrumb.Item>
{/each}
</Breadcrumb.List>
</Breadcrumb.Root>
On This Page