Sivir UI
79

Breadcrumb

Links back to the parent pages of the current page, separated by chevrons or your own separator.

<script lang="ts">
    import ChevronRight from '@lucide/svelte/icons/chevron-right';
    import * as Breadcrumb from '@sivir-ui/svelte/components/breadcrumb';
</script>

<div class="flex items-center justify-center">
    <Breadcrumb.Root>
        <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
        <Breadcrumb.Separator><ChevronRight size={14} /></Breadcrumb.Separator>
        <Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item>
        <Breadcrumb.Separator><ChevronRight size={14} /></Breadcrumb.Separator>
        <Breadcrumb.Item href="/docs/components/breadcrumb">Breadcrumb</Breadcrumb.Item>
    </Breadcrumb.Root>
</div>

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add breadcrumb

Usage

Each Item renders a link. The Item whose href matches the current path, read from SvelteKit's $app/state, gets the current-page style. An empty Separator renders a chevron.

import * as Breadcrumb from '@sivir-ui/svelte/components/breadcrumb';

<Breadcrumb.Root>
  <Breadcrumb.Item href="/projects">Projects</Breadcrumb.Item>
  <Breadcrumb.Separator />
  <Breadcrumb.Item href="/projects/atlas">Atlas</Breadcrumb.Item>
</Breadcrumb.Root>

Examples

Separator styles

<script lang="ts">
    import ChevronRight from '@lucide/svelte/icons/chevron-right';
    import * as Breadcrumb from '@sivir-ui/svelte/components/breadcrumb';
</script>

<div class="flex flex-col gap-6">
    <div class="flex items-center justify-center">
        <Breadcrumb.Root>
            <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
            <Breadcrumb.Separator><ChevronRight size={12} /></Breadcrumb.Separator>
            <Breadcrumb.Item>Settings</Breadcrumb.Item>
        </Breadcrumb.Root>
    </div>
    <div class="flex items-center justify-center">
        <Breadcrumb.Root>
            <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
            <Breadcrumb.Separator>/</Breadcrumb.Separator>
            <Breadcrumb.Item>Settings</Breadcrumb.Item>
        </Breadcrumb.Root>
    </div>
</div>

With home icon

<script lang="ts">
    import ChevronRight from '@lucide/svelte/icons/chevron-right';
    import Home from '@lucide/svelte/icons/home';
    import * as Breadcrumb from '@sivir-ui/svelte/components/breadcrumb';
</script>

<div class="flex items-center justify-center">
    <Breadcrumb.Root>
        <Breadcrumb.Item href="/">
            <Home size={13} />
            <span class="sr-only">Home</span>
        </Breadcrumb.Item>
        <Breadcrumb.Separator><ChevronRight size={12} /></Breadcrumb.Separator>
        <Breadcrumb.Item href="/docs">Docs</Breadcrumb.Item>
        <Breadcrumb.Separator><ChevronRight size={12} /></Breadcrumb.Separator>
        <Breadcrumb.Item href="/docs/components">Components</Breadcrumb.Item>
    </Breadcrumb.Root>
</div>

Anatomy

Breadcrumb.Root - Lays out items and separators in a row.

Breadcrumb.Item - Renders a link, styled as current when it matches the path.

Breadcrumb.Separator - Renders a chevron, or your own separator content.