Breadcrumb

Installation

	npx  shadcn-svelte@latest add breadcrumb

Usage

	<script lang="ts">
  import * as Breadcrumb from "$lib/components/ui/breadcrumb/index.js";
</script>
 
<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>

Examples

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 asChild prop on <Breadcrumb.Link />.

Responsive

Here's an example of a responsive breadcrumb that composes <Breadcrumb.Item /> with <Breadcrumb.Ellipsis />, <DropdownMenu />, and <Drawer />.

It displays a dropdown on desktop and a drawer on mobile.