Breadcrumbs

Breadcrumbs are used to indicate the current page's location in the navigation hierarchy, as well as to navigate through it.

Showcase

Source

<script>
  const items = [
    { href: '/', text: 'Home' },
    { href: '/docs', text: 'Docs' },
    { text: 'Components' },
  ];
</script>

<Breadcrumbs {items} />

<Breadcrumbs {items} separator='~' />

<Breadcrumbs {items}>
  <div slot="item" let:item>
    {#if item.href === '/'}
      <Button href="/" round small>
        <HomeIcon size="20" />
      </Button>
    {:else}
      <Chip>{item.text}</Chip>
    {/if}
  </div>
  <ArrowRightIcon slot="separator" size="20" />
</Breadcrumbs>

Properties #

Functional Properties

Name	Default	Type	Description
`items`	`[]`	`Array<{ href?: string; text: string; }>`	The list of segments to be displayed.
`separator`	`'/'`	`string`	The separator between segments.

Slots #

`item` slot

The item displayed in the breadcrumbs. Defaults to a <Button> if href is provided, otherwise a <span>.

Prop Name	Type	Description
`item`	`{ href?: string, text: string }`	Information about the current segment.

`separator` slot

If a string separator is not enough, use this slot to add a custom component separator (and ignore the prop).

SCSS Variables #

Name	Description	Default
`$thin-font-weight`	The font size of the separator and the segments without `href`.	`300`