Breadcrumbs

A component for displaying the navigation path or hierarchy of a user's location within a site.

Usage

<script>
  import {Breadcrumbs} from 'ui-ingredients';
  import {ChevronRightIcon} from '$lib/icons';
</script>

<Breadcrumbs.Root>
  <Breadcrumbs.List>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
      <Breadcrumbs.Separator>
        <ChevronRightIcon />
      </Breadcrumbs.Separator>
    </Breadcrumbs.Item>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="/components">Components</Breadcrumbs.Link>
      <Breadcrumbs.Separator>
        <ChevronRightIcon />
      </Breadcrumbs.Separator>
    </Breadcrumbs.Item>
    <Breadcrumbs.Item>
      <Breadcrumbs.Link href="/components/breadcrumbs" current>
        Breadcrumbs
      </Breadcrumbs.Link>
    </Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

API Reference

Root

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	breadcrumbs
`data-scope`	root

Item

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	breadcrumbs
`data-scope`	item

Link

Prop	Default	Description
`current`		`boolean` Whether the link is the current page.
`href`		`string` The link to navigate to.
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-current`	Present when current is true
`data-disabled`	Present when current is true
`data-part`	breadcrumbs
`data-scope`	link

List

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	breadcrumbs
`data-scope`	list

Separator

Prop	Default	Description
`asChild`		`Snippet` Render a different element.

Data Attribute	Value
`data-part`	breadcrumbs
`data-scope`	separator