Breadcrumb

A navigation component showing the current page location in a hierarchy

List Variants

Different visual styles for the breadcrumb list.

Default

Solid

Subtle

Bold

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4
5	const {
6		Breadcrumb,
7		BreadcrumbList,
8		BreadcrumbItem,
9		BreadcrumbLink,
10		BreadcrumbSeparator,
11		BreadcrumbPage
12	} = BreadcrumbPrimitives;
13</script>
14
15<div class="space-y-6">
16	<!-- Default -->
17	<Breadcrumb>
18		<BreadcrumbList variant="default">
19			<BreadcrumbItem>
20				<BreadcrumbLink href="/">Home</BreadcrumbLink>
21			</BreadcrumbItem>
22			<BreadcrumbSeparator />
23			<BreadcrumbItem>
24				<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
25			</BreadcrumbItem>
26		</BreadcrumbList>
27	</Breadcrumb>
28
29	<!-- Solid -->
30	<Breadcrumb>
31		<BreadcrumbList variant="solid">
32			<BreadcrumbItem>
33				<BreadcrumbLink href="/">Home</BreadcrumbLink>
34			</BreadcrumbItem>
35			<BreadcrumbSeparator />
36			<BreadcrumbItem>
37				<BreadcrumbPage>Getting Started</BreadcrumbPage>
38			</BreadcrumbItem>
39		</BreadcrumbList>
40	</Breadcrumb>
41
42	<!-- Subtle -->
43	<Breadcrumb>
44		<BreadcrumbList variant="subtle">
45			<BreadcrumbItem>
46				<BreadcrumbLink href="/">Home</BreadcrumbLink>
47			</BreadcrumbItem>
48			<BreadcrumbSeparator />
49			<BreadcrumbItem>
50				<BreadcrumbPage>Article</BreadcrumbPage>
51			</BreadcrumbItem>
52		</BreadcrumbList>
53	</Breadcrumb>
54
55	<!-- Bold -->
56	<Breadcrumb>
57		<BreadcrumbList variant="bold">
58			<BreadcrumbItem>
59				<BreadcrumbLink href="/">Home</BreadcrumbLink>
60			</BreadcrumbItem>
61			<BreadcrumbSeparator />
62			<BreadcrumbItem>
63				<BreadcrumbPage>Laptops</BreadcrumbPage>
64			</BreadcrumbItem>
65		</BreadcrumbList>
66	</Breadcrumb>
67</div>

Link Variants

Different hover and interaction styles for links.

Default Link

Underline Link

Bold Link

Subtle Link

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4
5	const {
6		Breadcrumb,
7		BreadcrumbList,
8		BreadcrumbItem,
9		BreadcrumbLink,
10		BreadcrumbSeparator,
11		BreadcrumbPage
12	} = BreadcrumbPrimitives;
13</script>
14
15<div class="space-y-6">
16	<!-- Default Link -->
17	<Breadcrumb>
18		<BreadcrumbList>
19			<BreadcrumbItem>
20				<BreadcrumbLink variant="default" href="/">Home</BreadcrumbLink>
21			</BreadcrumbItem>
22			<BreadcrumbSeparator />
23			<BreadcrumbItem>
24				<BreadcrumbPage>Profile</BreadcrumbPage>
25			</BreadcrumbItem>
26		</BreadcrumbList>
27	</Breadcrumb>
28
29	<!-- Underline Link -->
30	<Breadcrumb>
31		<BreadcrumbList>
32			<BreadcrumbItem>
33				<BreadcrumbLink variant="underline" href="/">Home</BreadcrumbLink>
34			</BreadcrumbItem>
35			<BreadcrumbSeparator />
36			<BreadcrumbItem>
37				<BreadcrumbPage>Analytics</BreadcrumbPage>
38			</BreadcrumbItem>
39		</BreadcrumbList>
40	</Breadcrumb>
41
42	<!-- Bold Link -->
43	<Breadcrumb>
44		<BreadcrumbList>
45			<BreadcrumbItem>
46				<BreadcrumbLink variant="bold" href="/">Home</BreadcrumbLink>
47			</BreadcrumbItem>
48			<BreadcrumbSeparator />
49			<BreadcrumbItem>
50				<BreadcrumbPage>Website</BreadcrumbPage>
51			</BreadcrumbItem>
52		</BreadcrumbList>
53	</Breadcrumb>
54
55	<!-- Subtle Link -->
56	<Breadcrumb>
57		<BreadcrumbList>
58			<BreadcrumbItem>
59				<BreadcrumbLink variant="subtle" href="/">Home</BreadcrumbLink>
60			</BreadcrumbItem>
61			<BreadcrumbSeparator />
62			<BreadcrumbItem>
63				<BreadcrumbPage>FAQ</BreadcrumbPage>
64			</BreadcrumbItem>
65		</BreadcrumbList>
66	</Breadcrumb>
67</div>

Separator Variants

Different separator icons and styles.

Chevron (Default)

Slash

Dot

Arrow

Custom Separator

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4
5	const {
6		Breadcrumb,
7		BreadcrumbList,
8		BreadcrumbItem,
9		BreadcrumbLink,
10		BreadcrumbSeparator,
11		BreadcrumbPage
12	} = BreadcrumbPrimitives;
13</script>
14
15<div class="space-y-6">
16	<!-- Chevron (Default) -->
17	<Breadcrumb>
18		<BreadcrumbList>
19			<BreadcrumbItem>
20				<BreadcrumbLink href="/">Home</BreadcrumbLink>
21			</BreadcrumbItem>
22			<BreadcrumbSeparator variant="default" />
23			<BreadcrumbItem>
24				<BreadcrumbPage>Guide</BreadcrumbPage>
25			</BreadcrumbItem>
26		</BreadcrumbList>
27	</Breadcrumb>
28
29	<!-- Slash -->
30	<Breadcrumb>
31		<BreadcrumbList>
32			<BreadcrumbItem>
33				<BreadcrumbLink href="/">Home</BreadcrumbLink>
34			</BreadcrumbItem>
35			<BreadcrumbSeparator variant="slash" />
36			<BreadcrumbItem>
37				<BreadcrumbPage>Introduction</BreadcrumbPage>
38			</BreadcrumbItem>
39		</BreadcrumbList>
40	</Breadcrumb>
41
42	<!-- Dot -->
43	<Breadcrumb>
44		<BreadcrumbList>
45			<BreadcrumbItem>
46				<BreadcrumbLink href="/">Home</BreadcrumbLink>
47			</BreadcrumbItem>
48			<BreadcrumbSeparator variant="dot" />
49			<BreadcrumbItem>
50				<BreadcrumbPage>Team</BreadcrumbPage>
51			</BreadcrumbItem>
52		</BreadcrumbList>
53	</Breadcrumb>
54
55	<!-- Arrow -->
56	<Breadcrumb>
57		<BreadcrumbList>
58			<BreadcrumbItem>
59				<BreadcrumbLink href="/">Home</BreadcrumbLink>
60			</BreadcrumbItem>
61			<BreadcrumbSeparator variant="arrow" />
62			<BreadcrumbItem>
63				<BreadcrumbPage>Website</BreadcrumbPage>
64			</BreadcrumbItem>
65		</BreadcrumbList>
66	</Breadcrumb>
67</div>

Page Variants

Different styles for the current page indicator.

Default Page

Bold Page

Muted Page

Accent Page

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4
5	const {
6		Breadcrumb,
7		BreadcrumbList,
8		BreadcrumbItem,
9		BreadcrumbLink,
10		BreadcrumbSeparator,
11		BreadcrumbPage
12	} = BreadcrumbPrimitives;
13</script>
14
15<div class="space-y-6">
16	<!-- Default Page -->
17	<Breadcrumb>
18		<BreadcrumbList>
19			<BreadcrumbItem>
20				<BreadcrumbLink href="/">Home</BreadcrumbLink>
21			</BreadcrumbItem>
22			<BreadcrumbSeparator />
23			<BreadcrumbItem>
24				<BreadcrumbPage variant="default">Current Page</BreadcrumbPage>
25			</BreadcrumbItem>
26		</BreadcrumbList>
27	</Breadcrumb>
28
29	<!-- Bold Page -->
30	<Breadcrumb>
31		<BreadcrumbList>
32			<BreadcrumbItem>
33				<BreadcrumbLink href="/">Home</BreadcrumbLink>
34			</BreadcrumbItem>
35			<BreadcrumbSeparator />
36			<BreadcrumbItem>
37				<BreadcrumbPage variant="bold">Current Page</BreadcrumbPage>
38			</BreadcrumbItem>
39		</BreadcrumbList>
40	</Breadcrumb>
41
42	<!-- Muted Page -->
43	<Breadcrumb>
44		<BreadcrumbList>
45			<BreadcrumbItem>
46				<BreadcrumbLink href="/">Home</BreadcrumbLink>
47			</BreadcrumbItem>
48			<BreadcrumbSeparator />
49			<BreadcrumbItem>
50				<BreadcrumbPage variant="muted">Current Page</BreadcrumbPage>
51			</BreadcrumbItem>
52		</BreadcrumbList>
53	</Breadcrumb>
54
55	<!-- Accent Page -->
56	<Breadcrumb>
57		<BreadcrumbList>
58			<BreadcrumbItem>
59				<BreadcrumbLink href="/">Home</BreadcrumbLink>
60			</BreadcrumbItem>
61			<BreadcrumbSeparator />
62			<BreadcrumbItem>
63				<BreadcrumbPage variant="accent">Current Page</BreadcrumbPage>
64			</BreadcrumbItem>
65		</BreadcrumbList>
66	</Breadcrumb>
67</div>

Size Variants

Different sizes for various layouts.

Small

Default

Large

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4
5	const {
6		Breadcrumb,
7		BreadcrumbList,
8		BreadcrumbItem,
9		BreadcrumbLink,
10		BreadcrumbSeparator,
11		BreadcrumbPage
12	} = BreadcrumbPrimitives;
13</script>
14
15<div class="space-y-6">
16	<!-- Small -->
17	<Breadcrumb>
18		<BreadcrumbList size="sm">
19			<BreadcrumbItem>
20				<BreadcrumbLink href="/">Home</BreadcrumbLink>
21			</BreadcrumbItem>
22			<BreadcrumbSeparator size="sm" />
23			<BreadcrumbItem>
24				<BreadcrumbPage>Small Size</BreadcrumbPage>
25			</BreadcrumbItem>
26		</BreadcrumbList>
27	</Breadcrumb>
28
29	<!-- Default -->
30	<Breadcrumb>
31		<BreadcrumbList size="default">
32			<BreadcrumbItem>
33				<BreadcrumbLink href="/">Home</BreadcrumbLink>
34			</BreadcrumbItem>
35			<BreadcrumbSeparator size="default" />
36			<BreadcrumbItem>
37				<BreadcrumbPage>Default Size</BreadcrumbPage>
38			</BreadcrumbItem>
39		</BreadcrumbList>
40	</Breadcrumb>
41
42	<!-- Large -->
43	<Breadcrumb>
44		<BreadcrumbList size="lg">
45			<BreadcrumbItem>
46				<BreadcrumbLink href="/">Home</BreadcrumbLink>
47			</BreadcrumbItem>
48			<BreadcrumbSeparator size="lg" />
49			<BreadcrumbItem>
50				<BreadcrumbPage>Large Size</BreadcrumbPage>
51			</BreadcrumbItem>
52		</BreadcrumbList>
53	</Breadcrumb>
54</div>

Spacing Variants

Control the gap between breadcrumb items.

Compact

Default

Relaxed

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4
5	const {
6		Breadcrumb,
7		BreadcrumbList,
8		BreadcrumbItem,
9		BreadcrumbLink,
10		BreadcrumbSeparator,
11		BreadcrumbPage
12	} = BreadcrumbPrimitives;
13</script>
14
15<div class="space-y-6">
16	<!-- Compact -->
17	<Breadcrumb>
18		<BreadcrumbList spacing="compact">
19			<BreadcrumbItem>
20				<BreadcrumbLink href="/">Home</BreadcrumbLink>
21			</BreadcrumbItem>
22			<BreadcrumbSeparator />
23			<BreadcrumbItem>
24				<BreadcrumbPage>Compact</BreadcrumbPage>
25			</BreadcrumbItem>
26		</BreadcrumbList>
27	</Breadcrumb>
28
29	<!-- Default -->
30	<Breadcrumb>
31		<BreadcrumbList spacing="default">
32			<BreadcrumbItem>
33				<BreadcrumbLink href="/">Home</BreadcrumbLink>
34			</BreadcrumbItem>
35			<BreadcrumbSeparator />
36			<BreadcrumbItem>
37				<BreadcrumbPage>Default</BreadcrumbPage>
38			</BreadcrumbItem>
39		</BreadcrumbList>
40	</Breadcrumb>
41
42	<!-- Relaxed -->
43	<Breadcrumb>
44		<BreadcrumbList spacing="relaxed">
45			<BreadcrumbItem>
46				<BreadcrumbLink href="/">Home</BreadcrumbLink>
47			</BreadcrumbItem>
48			<BreadcrumbSeparator />
49			<BreadcrumbItem>
50				<BreadcrumbPage>Relaxed</BreadcrumbPage>
51			</BreadcrumbItem>
52		</BreadcrumbList>
53	</Breadcrumb>
54</div>

With Icons

Enhance breadcrumbs with icons for better visual communication.

File Navigation

Application Navigation

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4	import { Home, Folder, File } from "@kareyes/aether/icons";
5
6	const {
7		Breadcrumb,
8		BreadcrumbList,
9		BreadcrumbItem,
10		BreadcrumbLink,
11		BreadcrumbSeparator,
12		BreadcrumbPage
13	} = BreadcrumbPrimitives;
14</script>
15
16<Breadcrumb>
17	<BreadcrumbList>
18		<BreadcrumbItem>
19			<BreadcrumbLink href="/">
20				<Home class="size-4" />
21				<span>Home</span>
22			</BreadcrumbLink>
23		</BreadcrumbItem>
24		<BreadcrumbSeparator />
25		<BreadcrumbItem>
26			<BreadcrumbLink href="/documents">
27				<Folder class="size-4" />
28				<span>Documents</span>
29			</BreadcrumbLink>
30		</BreadcrumbItem>
31		<BreadcrumbSeparator />
32		<BreadcrumbItem>
33			<BreadcrumbPage>
34				<File class="size-4" />
35				<span>readme.md</span>
36			</BreadcrumbPage>
37		</BreadcrumbItem>
38	</BreadcrumbList>
39</Breadcrumb>

With Ellipsis

Collapse middle items for long breadcrumb trails.

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4
5	const {
6		Breadcrumb,
7		BreadcrumbList,
8		BreadcrumbItem,
9		BreadcrumbLink,
10		BreadcrumbSeparator,
11		BreadcrumbPage,
12		BreadcrumbEllipsis
13	} = BreadcrumbPrimitives;
14</script>
15
16<Breadcrumb>
17	<BreadcrumbList>
18		<BreadcrumbItem>
19			<BreadcrumbLink href="/">Home</BreadcrumbLink>
20		</BreadcrumbItem>
21		<BreadcrumbSeparator />
22		<BreadcrumbItem>
23			<BreadcrumbEllipsis />
24		</BreadcrumbItem>
25		<BreadcrumbSeparator />
26		<BreadcrumbItem>
27			<BreadcrumbLink href="/components">Components</BreadcrumbLink>
28		</BreadcrumbItem>
29		<BreadcrumbSeparator />
30		<BreadcrumbItem>
31			<BreadcrumbPage>Breadcrumb</BreadcrumbPage>
32		</BreadcrumbItem>
33	</BreadcrumbList>
34</Breadcrumb>

Dynamic Breadcrumbs

Generated from data structure.

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4
5	const {
6		Breadcrumb,
7		BreadcrumbList,
8		BreadcrumbItem,
9		BreadcrumbLink,
10		BreadcrumbSeparator,
11		BreadcrumbPage
12	} = BreadcrumbPrimitives;
13
14	type PathSegment = {
15		label: string;
16		href?: string;
17	};
18
19	let dynamicSegments: PathSegment[] = $state([
20		{ label: "Home", href: "/" },
21		{ label: "Products", href: "/products" },
22		{ label: "Electronics", href: "/products/electronics" },
23		{ label: "Laptops" }
24	]);
25</script>
26
27<Breadcrumb>
28	<BreadcrumbList>
29		{#each dynamicSegments as segment, i}
30			<BreadcrumbItem>
31				{#if segment.href}
32					<BreadcrumbLink href={segment.href}>{segment.label}</BreadcrumbLink>
33				{:else}
34					<BreadcrumbPage>{segment.label}</BreadcrumbPage>
35				{/if}
36			</BreadcrumbItem>
37			{#if i < dynamicSegments.length - 1}
38				<BreadcrumbSeparator />
39			{/if}
40		{/each}
41	</BreadcrumbList>
42</Breadcrumb>

Advanced Combinations

Combining multiple variants for custom styles.

Bold + Slash + Large + Relaxed

Subtle + Underline + Dot + Small

Solid + Arrow + Accent Page

Code Svelte

1
2<script lang="ts">
3	import { BreadcrumbPrimitives } from "@kareyes/aether";
4	import { Home, User } from "@kareyes/aether/icons";
5
6	const {
7		Breadcrumb,
8		BreadcrumbList,
9		BreadcrumbItem,
10		BreadcrumbLink,
11		BreadcrumbSeparator,
12		BreadcrumbPage
13	} = BreadcrumbPrimitives;
14</script>
15
16<div class="space-y-6">
17	<!-- Bold + Slash + Large + Relaxed -->
18	<Breadcrumb>
19		<BreadcrumbList variant="bold" size="lg" spacing="relaxed">
20			<BreadcrumbItem>
21				<BreadcrumbLink variant="bold" href="/">
22					<Home class="size-5" />
23					<span>Home</span>
24				</BreadcrumbLink>
25			</BreadcrumbItem>
26			<BreadcrumbSeparator variant="slash" size="lg" />
27			<BreadcrumbItem>
28				<BreadcrumbPage variant="bold">Electronics</BreadcrumbPage>
29			</BreadcrumbItem>
30		</BreadcrumbList>
31	</Breadcrumb>
32
33	<!-- Solid + Arrow + Accent Page -->
34	<Breadcrumb>
35		<BreadcrumbList variant="solid">
36			<BreadcrumbItem>
37				<BreadcrumbLink href="/">
38					<User class="size-4" />
39					<span>Account</span>
40				</BreadcrumbLink>
41			</BreadcrumbItem>
42			<BreadcrumbSeparator variant="arrow" />
43			<BreadcrumbItem>
44				<BreadcrumbPage variant="accent">Security</BreadcrumbPage>
45			</BreadcrumbItem>
46		</BreadcrumbList>
47	</Breadcrumb>
48</div>

Features

🎨 Multiple Variants: Default, Solid, Subtle, Bold styles
📏 3 Size Options: Small, Default, Large
🔗 Link Variants: Default, Underline, Bold, Subtle
➡️ 4 Separator Styles: Chevron, Slash, Dot, Arrow
♿ Fully Accessible: Proper ARIA attributes and semantic HTML
🎯 Type-Safe: Full TypeScript support
🎭 Customizable: Extensive styling options with Tailwind
🔄 Reactive: Svelte 5 runes for optimal performance

Implementation Details

The Breadcrumb component is built using tailwind-variants (tv) for a robust variant system:

Component Architecture

BreadcrumbList Component

Controls overall breadcrumb styling
4 visual variants (default, solid, subtle, bold)
3 size options (sm, default, lg)
3 spacing options (compact, default, relaxed)
Exported types: BreadcrumbListVariant, BreadcrumbListSize, BreadcrumbListSpacing

BreadcrumbLink Component

Interactive link styling
4 link variants (default, underline, bold, subtle)
Hover transitions and effects
Exported types: BreadcrumbLinkVariant

BreadcrumbSeparator Component

4 separator styles (chevron, slash, dot, arrow)
Size control independent of list
Custom separator support
Exported types: BreadcrumbSeparatorVariant, BreadcrumbSeparatorSize

BreadcrumbPage Component

Current page indicator
4 styling variants (default, bold, muted, accent)
Non-interactive by design
Exported types: BreadcrumbPageVariant

Usage

Basic Example

<script lang="ts">
  import { BreadcrumbPrimitives } from "@kareyes/aether";
  const {
    Breadcrumb,
    BreadcrumbList,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbSeparator,
    BreadcrumbPage
  } = BreadcrumbPrimitives;
</script>

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Variants

List Variants

Default Variant

Standard muted text style.

<BreadcrumbList variant="default">
  <!-- items -->
</BreadcrumbList>

Solid Variant

More prominent with foreground color.

<BreadcrumbList variant="solid">
  <!-- items -->
</BreadcrumbList>

Subtle Variant

More subdued with reduced opacity.

<BreadcrumbList variant="subtle">
  <!-- items -->
</BreadcrumbList>

Bold Variant

Emphasized with medium font weight.

<BreadcrumbList variant="bold">
  <!-- items -->
</BreadcrumbList>

Link Variants

Default Link

Simple hover effect.

<BreadcrumbLink variant="default" href="/">Home</BreadcrumbLink>

Underline Link

Shows underline on hover.

<BreadcrumbLink variant="underline" href="/">Home</BreadcrumbLink>

Bold Link

Medium font weight.

<BreadcrumbLink variant="bold" href="/">Home</BreadcrumbLink>

Subtle Link

Subdued hover effect.

<BreadcrumbLink variant="subtle" href="/">Home</BreadcrumbLink>

Separator Variants

Chevron (Default)

Standard right-pointing chevron.

<BreadcrumbSeparator variant="default" />

Slash

Forward slash separator.

<BreadcrumbSeparator variant="slash" />

Dot

Small circular dot.

<BreadcrumbSeparator variant="dot" />

Arrow

Right-pointing arrow.

<BreadcrumbSeparator variant="arrow" />

Custom Separator

Provide your own content.

<BreadcrumbSeparator>
  <span>→</span>
</BreadcrumbSeparator>

Page Variants

Default Page

Normal text style.

<BreadcrumbPage variant="default">Current Page</BreadcrumbPage>

Bold Page

Emphasized current page.

<BreadcrumbPage variant="bold">Current Page</BreadcrumbPage>

Muted Page

Subdued current page.

<BreadcrumbPage variant="muted">Current Page</BreadcrumbPage>

Accent Page

Primary color emphasis.

<BreadcrumbPage variant="accent">Current Page</BreadcrumbPage>

Sizes

Small

Compact size for dense layouts.

<BreadcrumbList size="sm">
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator size="sm" />
  <BreadcrumbItem>
    <BreadcrumbPage>Page</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>

Default

Standard size for most use cases.

<BreadcrumbList size="default">
  <!-- items -->
</BreadcrumbList>

Large

Larger size for better visibility.

<BreadcrumbList size="lg">
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator size="lg" />
  <BreadcrumbItem>
    <BreadcrumbPage>Page</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>

Spacing

Control the gap between breadcrumb items.

<!-- Compact spacing -->
<BreadcrumbList spacing="compact">
  <!-- items -->
</BreadcrumbList>

<!-- Default spacing -->
<BreadcrumbList spacing="default">
  <!-- items -->
</BreadcrumbList>

<!-- Relaxed spacing -->
<BreadcrumbList spacing="relaxed">
  <!-- items -->
</BreadcrumbList>

With Icons

Enhance breadcrumbs with icons.

<script>
  import { Home, Folder, File } from "@lucide/svelte";
</script>

<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">
      <Home class="size-4" />
      <span>Home</span>
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbLink href="/documents">
      <Folder class="size-4" />
      <span>Documents</span>
    </BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>
      <File class="size-4" />
      <span>readme.md</span>
    </BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>

With Dropdown

Show collapsed items with a dropdown.

<script>
  import { BreadcrumbEllipsis } from "@kareyes/aether";
  import {
    DropdownMenu,
    DropdownMenuTrigger,
    DropdownMenuContent,
    DropdownMenuItem
  } from "@kareyes/aether";
</script>

<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <DropdownMenu>
      <DropdownMenuTrigger>
        <BreadcrumbEllipsis />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuItem href="/docs">Documentation</DropdownMenuItem>
        <DropdownMenuItem href="/themes">Themes</DropdownMenuItem>
        <DropdownMenuItem href="/examples">Examples</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>

API Reference

Breadcrumb (Root)

The root breadcrumb container.

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes

BreadcrumbList

Container for breadcrumb items.

Prop	Type	Default	Description
`variant`	`"default" \| "solid" \| "subtle" \| "bold"`	`"default"`	Visual style variant
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Size of the breadcrumb list
`spacing`	`"compact" \| "default" \| "relaxed"`	`"default"`	Gap between items
`class`	`string`	-	Additional CSS classes

BreadcrumbItem

Individual breadcrumb item container.

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes

BreadcrumbLink

Clickable breadcrumb link.

Prop	Type	Default	Description
`href`	`string`	-	Link destination
`variant`	`"default" \| "underline" \| "bold" \| "subtle"`	`"default"`	Visual style variant
`class`	`string`	-	Additional CSS classes

BreadcrumbPage

Current page indicator (non-interactive).

Prop	Type	Default	Description
`variant`	`"default" \| "bold" \| "muted" \| "accent"`	`"default"`	Visual style variant
`class`	`string`	-	Additional CSS classes

BreadcrumbSeparator

Visual separator between items.

Prop	Type	Default	Description
`variant`	`"default" \| "slash" \| "dot" \| "arrow"`	`"default"`	Separator icon style
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Size of the separator icon
`class`	`string`	-	Additional CSS classes

Can accept custom children to override the default separator icon.

BreadcrumbEllipsis

Ellipsis indicator for collapsed items.

Prop	Type	Default	Description
`class`	`string`	-	Additional CSS classes

Advanced Examples

Dynamic Breadcrumbs

<script lang="ts">
  type PathSegment = {
    label: string;
    href?: string;
  };

  let segments: PathSegment[] = $state([
    { label: "Home", href: "/" },
    { label: "Products", href: "/products" },
    { label: "Electronics", href: "/products/electronics" },
    { label: "Laptops" }
  ]);
</script>

<Breadcrumb>
  <BreadcrumbList>
    {#each segments as segment, i}
      <BreadcrumbItem>
        {#if segment.href}
          <BreadcrumbLink href={segment.href}>{segment.label}</BreadcrumbLink>
        {:else}
          <BreadcrumbPage>{segment.label}</BreadcrumbPage>
        {/if}
      </BreadcrumbItem>
      {#if i < segments.length - 1}
        <BreadcrumbSeparator />
      {/if}
    {/each}
  </BreadcrumbList>
</Breadcrumb>

Responsive Breadcrumbs

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    
    <!-- Hide on mobile, show on desktop -->
    <BreadcrumbItem class="hidden md:inline-flex">
      <BreadcrumbLink href="/products">Products</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator class="hidden md:inline-flex" />
    
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Custom Link Component

Use with SvelteKit's enhanced links or custom routers.

<script>
  import { goto } from "$app/navigation";
</script>

<BreadcrumbLink
  href="/custom"
  child={({ props }) => (
    <a {...props} data-sveltekit-preload-data>
      Custom Link
    </a>
  )}
/>

Best Practices

Variant Consistency

Keep variants consistent across the breadcrumb:

<!-- ✅ Good -->
<BreadcrumbList variant="bold">
  <BreadcrumbLink variant="bold" href="/">Home</BreadcrumbLink>
</BreadcrumbList>

<!-- ⚠️ Mixed (intentional styling) -->
<BreadcrumbList variant="default">
  <BreadcrumbLink variant="bold" href="/">Home</BreadcrumbLink>
</BreadcrumbList>

Size Consistency

Match separator sizes with list sizes:

<!-- ✅ Good -->
<BreadcrumbList size="lg">
  <BreadcrumbSeparator size="lg" />
</BreadcrumbList>

<!-- ❌ Bad -->
<BreadcrumbList size="lg">
  <BreadcrumbSeparator size="sm" />
</BreadcrumbList>

Accessible Labels

Always provide meaningful text:

<!-- ✅ Good -->
<BreadcrumbLink href="/products">Products</BreadcrumbLink>

<!-- ❌ Bad -->
<BreadcrumbLink href="/p">P</BreadcrumbLink>

Limit Depth

For deep hierarchies, consider collapsing:

<!-- ✅ Good - Collapsed middle items -->
<BreadcrumbList>
  <BreadcrumbItem>
    <BreadcrumbLink href="/">Home</BreadcrumbLink>
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbEllipsis />
  </BreadcrumbItem>
  <BreadcrumbSeparator />
  <BreadcrumbItem>
    <BreadcrumbPage>Current</BreadcrumbPage>
  </BreadcrumbItem>
</BreadcrumbList>

Styling

CSS Variables

The component uses the following CSS custom properties:

--foreground - Default text color
--muted-foreground - Muted text color
--primary - Primary accent color
--border - Border color

Tailwind Classes

You can customize any component with Tailwind classes:

<BreadcrumbList class="bg-muted p-2 rounded-lg">
  <BreadcrumbLink class="text-blue-600 hover:text-blue-800">
    Custom Link
  </BreadcrumbLink>
</BreadcrumbList>

Accessibility

The Breadcrumb component provides:

Semantic HTML: Uses <nav> with aria-label="breadcrumb"
Ordered List: Proper <ol> structure for screen readers
ARIA Current: aria-current="page" on current page
Hidden Separators: Separators are aria-hidden="true"
Keyboard Navigation: Standard link navigation with Tab key

Screen Reader Support

The breadcrumb is announced as "breadcrumb navigation" and items are read in order. The current page is identified with "current page".

Demo & Storybook

Demo Page

Visit /breadcrumb-demo for an interactive demonstration showcasing:

All list variants (default, solid, subtle, bold)
All link variants (default, underline, bold, subtle)
All separator styles (chevron, slash, dot, arrow)
Size options (sm, default, lg)
Spacing options (compact, default, relaxed)
Page variants (default, bold, muted, accent)
With icons
With dropdowns
Dynamic breadcrumbs

Storybook Stories

The component includes comprehensive Storybook stories at:
src/lib/components/ui/breadcrumb/docs/breadcrumb.stories.svelte

Related Components

Button - For action items in breadcrumbs
DropdownMenu - For collapsed breadcrumb items
Link - Alternative navigation component

Technical Implementation

File Structure

breadcrumb/
├── index.ts                      # Exports and type definitions
├── breadcrumb.svelte            # Root container
├── breadcrumb-list.svelte       # List with variants
├── breadcrumb-item.svelte       # Item container
├── breadcrumb-link.svelte       # Interactive link
├── breadcrumb-page.svelte       # Current page indicator
├── breadcrumb-separator.svelte  # Visual separator
├── breadcrumb-ellipsis.svelte   # Collapse indicator
├── BREADCRUMB.md                # This documentation
└── docs/
    └── breadcrumb.stories.svelte # Storybook stories

Type Exports

All variant types are properly exported for TypeScript users:

BreadcrumbListVariant, BreadcrumbListSize, BreadcrumbListSpacing
BreadcrumbLinkVariant
BreadcrumbSeparatorVariant, BreadcrumbSeparatorSize
BreadcrumbPageVariant