Breadcrumb

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-svelte/breadcrumb
Copy

Usage#

Copy<script lang="ts">
  import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>

Copy<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>

Composition#

Use the following composition to build a Breadcrumb:

CopyBreadcrumb.Root
└── Breadcrumb.List
    ├── Breadcrumb.Item
    │   └── Breadcrumb.Link
    ├── Breadcrumb.Separator
    ├── Breadcrumb.Item
    │   └── Breadcrumb.Link
    ├── Breadcrumb.Separator
    └── Breadcrumb.Item
        └── Breadcrumb.Page

Examples#

Basic#

A basic breadcrumb with a home link and a components link.

Custom separator#

Use a custom component in the <slot> of <Breadcrumb.Separator /> to create a custom separator.

Dropdown#

You can compose <Breadcrumb.Item /> with a <DropdownMenu /> to create a dropdown in the breadcrumb.

Collapsed#

We provide a <Breadcrumb.Ellipsis /> component to show a collapsed state when the breadcrumb is too long.

Link component#

To use a custom link component from your routing library, you can use the href prop on <Breadcrumb.Link />.

API Reference#

Breadcrumb.Root#

The Breadcrumb.Root component is the root navigation element that wraps all breadcrumb components.

Breadcrumb.List#

The Breadcrumb.List component displays the ordered list of breadcrumb items.

Breadcrumb.Item#

The Breadcrumb.Item component wraps individual breadcrumb items.

Breadcrumb.Link#

The Breadcrumb.Link component displays a clickable link in the breadcrumb.

Breadcrumb.Page#

The Breadcrumb.Page component displays the current page in the breadcrumb (non-clickable).

Breadcrumb.Separator#

The Breadcrumb.Separator component displays a separator between breadcrumb items. You can pass custom children to override the default separator icon.

Breadcrumb.Ellipsis#

The Breadcrumb.Ellipsis component displays an ellipsis indicator for collapsed breadcrumb items.