Displays the path to the current resource using a hierarchy of links.
1<script lang="ts">
2 import {
3 Breadcrumb,
4 BreadcrumbEllipsis,
Installation
pnpm dlx sprawlify@latest add breadcrumbnpx sprawlify@latest add breadcrumbyarn sprawlify@latest add breadcrumbbunx --bun sprawlify@latest add breadcrumb
Install the following dependencies:
pnpm add @sprawlify/primitives @sprawlify/sveltenpm install @sprawlify/primitives @sprawlify/svelteyarn add @sprawlify/primitives @sprawlify/sveltebun add @sprawlify/primitives @sprawlify/svelte
Add the following files to your project:
1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import { MoreHorizontalIcon } from "lucide-svelte"
5import type { HTMLAttributes } from "svelte/elements";
6
7interface Props extends HTMLAttributes<HTMLSpanElement>, PolymorphicProps<"span"> {}
8
9let { class: className, children, ...rest }: Props = $props()
10</script>
11
12<Sprawlify
13 as="span"
14 role="presentation"
15 aria-hidden="true"
16 data-scope="breadcrumb"
17 data-part="ellipsis"
18 class={cn("flex size-9 items-center justify-center", className)}
19 {...rest}
20>
21 {#if children}
22 {@render children?.()}
23 {:else}
24 <MoreHorizontalIcon class="size-4" />
25 {/if}
26</Sprawlify>1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLLiAttributes } from "svelte/elements";
5
6interface Props extends HTMLLiAttributes, PolymorphicProps<"li"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="li"
13 data-scope="breadcrumb"
14 data-part="item"
15 class={cn("inline-flex items-center gap-1.5", className)}
16 {...rest}
17>
18 {@render children?.()}
19</Sprawlify>1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAnchorAttributes } from "svelte/elements";
5
6interface Props extends HTMLAnchorAttributes, PolymorphicProps<"a"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="a"
13 data-scope="breadcrumb"
14 data-part="link"
15 class={cn("transition-colors hover:text-foreground", className)}
16 {...rest}
17>
18 {@render children?.()}
19</Sprawlify>1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLOlAttributes } from "svelte/elements";
5
6interface Props extends HTMLOlAttributes, PolymorphicProps<"ol"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="ol"
13 data-scope="breadcrumb"
14 data-part="list"
15 class={cn("flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground", className)}
16 {...rest}
17>
18 {@render children?.()}
19</Sprawlify>1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements";
5
6interface Props extends HTMLAttributes<HTMLSpanElement>, PolymorphicProps<"span"> {}
7
8let { class: className, children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="span"
13 role="link"
14 aria-disabled="true"
15 aria-current="page"
16 data-scope="breadcrumb"
17 data-part="page"
18 class={cn("font-normal text-foreground", className)}
19 {...rest}
20>
21 {@render children?.()}
22</Sprawlify>1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import { ChevronRightIcon } from "lucide-svelte"
5import type { HTMLLiAttributes } from "svelte/elements";
6
7interface Props extends HTMLLiAttributes, PolymorphicProps<"li"> {}
8
9let { class: className, children, ...rest }: Props = $props()
10</script>
11
12<Sprawlify
13 as="li"
14 role="presentation"
15 aria-hidden="true"
16 data-scope="breadcrumb"
17 data-part="separator"
18 class={cn("", className)}
19 {...rest}
20>
21 {#if children}
22 {@render children?.()}
23 {:else}
24 <ChevronRightIcon class="size-4" />
25 {/if}
26</Sprawlify>1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { Sprawlify, type PolymorphicProps } from "@sprawlify/svelte"
4import type { HTMLAttributes } from "svelte/elements";
5
6interface Props extends HTMLAttributes<HTMLElement>, PolymorphicProps<"nav"> {}
7
8let { children, ...rest }: Props = $props()
9</script>
10
11<Sprawlify
12 as="nav"
13 data-scope="breadcrumb"
14 data-part="root"
15 aria-label="breadcrumb"
16 {...rest}
17>
18 {@render children?.()}
19</Sprawlify>1export { default as Breadcrumb } from "./breadcrumb.svelte";2export { default as BreadcrumbList } from "./breadcrumb-list.svelte";3export { default as BreadcrumbItem } from "./breadcrumb-item.svelte";4export { default as BreadcrumbLink } from "./breadcrumb-link.svelte";5export { default as BreadcrumbPage } from "./breadcrumb-page.svelte";6export { default as BreadcrumbSeparator } from "./breadcrumb-separator.svelte";7export { default as BreadcrumbEllipsis } from "./breadcrumb-ellipsis.svelte";8Update the import paths to match your project setup.
Usage
1import {
2 Breadcrumb,
3 BreadcrumbItem,
4 BreadcrumbLink,
5 BreadcrumbList,
6 BreadcrumbPage,
7 BreadcrumbSeparator,
8} from "@/components/ui/breadcrumb"1<Breadcrumb>
2 <BreadcrumbList>
3 <BreadcrumbItem>
4 <BreadcrumbLink href="/">Home</BreadcrumbLink>
5 </BreadcrumbItem>
6 <BreadcrumbSeparator />
7 <BreadcrumbItem>
8 <BreadcrumbLink href="/components">Components</BreadcrumbLink>
9 </BreadcrumbItem>
10 <BreadcrumbSeparator />
11 <BreadcrumbItem>
12 <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
13 </BreadcrumbItem>
14 </BreadcrumbList>
15</Breadcrumb>Examples
Basic
A basic breadcrumb with a home link and a components link.
1<script lang="ts">
2import {
3 Breadcrumb,
4 BreadcrumbItem,
Collapsed
We provide a <BreadcrumbEllipsis /> component to show a collapsed state when the breadcrumb is too long.
1<script lang="ts">
2import {
3 Breadcrumb,
4 BreadcrumbEllipsis,
Custom Separator
Use a custom component as children for <BreadcrumbSeparator /> to create a custom separator.
1<script lang="ts">
2import { DotIcon } from "lucide-svelte"
3import {
4 Breadcrumb,
Dropdown
You can compose <BreadcrumbItem /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.
1<script lang="ts">
2 import { ChevronDown, DotIcon } from "lucide-svelte";
3 import {
4 Breadcrumb,
Get PRO
Need premium blocks and templates? Upgrade to PRO and get access.