Breadcrumb
Compact hierarchy marker — links, a current-page token, and a chevron separator. No motion; emphasis comes from typography weight and hover color.
Usage
breadcrumb.svelte
<script lang="ts">
import * as Breadcrumb from '$lib/components/ui/breadcrumb';
</script>
<Breadcrumb.Root>
<Breadcrumb.List>
<Breadcrumb.Item>
<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
</Breadcrumb.Item>
<Breadcrumb.Separator />
<Breadcrumb.Item>
<Breadcrumb.Page>Overview</Breadcrumb.Page>
</Breadcrumb.Item>
</Breadcrumb.List>
</Breadcrumb.Root>Custom separator
Slot any icon or glyph into Breadcrumb.Separator to override
the default chevron.
breadcrumb.svelte
<script lang="ts">
import type { WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<nav
bind:this={ref}
data-slot="breadcrumb"
aria-label="breadcrumb"
class={cn(className)}
{...restProps}
>
{@render children?.()}
</nav>
Collapsed with dropdown
Use Breadcrumb.Ellipsis alongside a Dropdown Menu to collapse
deep hierarchies.
breadcrumb.svelte
<script lang="ts">
import type { WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<nav
bind:this={ref}
data-slot="breadcrumb"
aria-label="breadcrumb"
class={cn(className)}
{...restProps}
>
{@render children?.()}
</nav>
Responsive
Hide middle items at narrow viewports using Breadcrumb.Ellipsis inside a md:hidden wrapper. The full list is visible
from md up.
breadcrumb-responsive.svelte
<script lang="ts">
import type { WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<nav
bind:this={ref}
data-slot="breadcrumb"
aria-label="breadcrumb"
class={cn(className)}
{...restProps}
>
{@render children?.()}
</nav>
Link component
Use the {#snippet child({ props })} pattern to
render Breadcrumb.Link through any router-aware anchor —
SvelteKit's <a> or an external component — without losing the breadcrumb's
visual styles.
breadcrumb-link-component.svelte
<script lang="ts">
import type { WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements';
import { cn } from '$lib/utils.js';
let {
ref = $bindable(null),
class: className,
children,
...restProps
}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
</script>
<nav
bind:this={ref}
data-slot="breadcrumb"
aria-label="breadcrumb"
class={cn(className)}
{...restProps}
>
{@render children?.()}
</nav>
Breadcrumb.Root props
Every subcomponent passes through native HTML attributes via spread.
| Prop | Type | Default | Description |
|---|---|---|---|
string | — | Merged onto the <nav> element via tailwind-merge. | |
HTMLElement | null | null | Two-way-bindable reference to the <nav>. |
Breadcrumb.Link props
| Prop | Type | Default | Description |
|---|---|---|---|
string | — | Anchor href. Standard HTMLAnchorAttributes. | |
Snippet<[{ props }]> | — | Render-prop escape hatch for asChild-style composition with router primitives. | |
string | — | Merged onto the link via tailwind-merge. |