Navigation

Breadcrumb

Display a navigation trail showing the user's current location within the site hierarchy. Supports icons, custom separators, and fully custom item rendering.

Playground

Experiment with different props in real-time.

Separator Icon

Basic Usage

Pass an array of items. The last item (without href) renders as the active page.

<script lang="ts">
  import { Breadcrumb } from 'sv5ui';

  const items = [
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/docs/components' },
    { label: 'Breadcrumb' }
  ];
</script>

<Breadcrumb {items} />

With Icons

Add leading icons to each item.

<Breadcrumb items={[
  { label: 'Home', href: '/', icon: 'lucide:house' },
  { label: 'Settings', href: '/settings', icon: 'lucide:settings' },
  { label: 'Profile', icon: 'lucide:user' }
]} />

Separator Icons

Change the separator icon globally.

<Breadcrumb {items} separatorIcon="lucide:chevron-right" />
<Breadcrumb {items} separatorIcon="lucide:slash" />
<Breadcrumb {items} separatorIcon="lucide:dot" />
<Breadcrumb {items} separatorIcon="lucide:minus" />
<Breadcrumb {items} separatorIcon="lucide:arrow-right" />

Disabled Items

Disable individual breadcrumb items.

<Breadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Archived', href: '/archived', disabled: true },
  { label: 'Detail' }
]} />

Long Path

Deep navigation trails with many levels.

<Breadcrumb items={[
  { label: 'Home', href: '/', icon: 'lucide:house' },
  { label: 'Products', href: '/products' },
  { label: 'Electronics', href: '/products/electronics' },
  { label: 'Phones', href: '/products/electronics/phones' },
  { label: 'iPhone 16 Pro' }
]} />

Custom Separator

Use the separator snippet for fully custom separators.

<Breadcrumb {items}>
  {#snippet separator()}
    <span class="text-on-surface/30 mx-1">/</span>
  {/snippet}
</Breadcrumb>

Custom Item

Use the item snippet to fully customize each breadcrumb.

<Breadcrumb {items}>
  {#snippet item({ item, index, active })}
    <span
      class="rounded-full px-3 py-1 text-sm font-medium
        {active
          ? 'bg-primary text-on-primary'
          : 'bg-surface-container text-on-surface/60 hover:bg-surface-container-high'}"
    >
      {item.label}
    </span>
  {/snippet}
</Breadcrumb>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Root nav element — controls wrapper styles`
`list`	`Ordered list element — controls list layout and spacing`
`item`	`List item element — controls individual item wrapper`
`link`	`Anchor/span element — controls link appearance and hover states`
`linkLeadingIcon`	`Icon before label inside link`
`linkLabel`	`Text label inside link`
`separator`	`Separator wrapper — controls spacing`
`separatorIcon`	`Separator icon element`

<Breadcrumb
  {items}
  ui={{
    root: 'bg-surface-container rounded-lg px-4 py-2',
    link: 'font-semibold',
    separatorIcon: 'text-primary'
  }}
/>

Snippets

Snippet	Props	Description
`item`	`item, index, active`	`Custom render for each breadcrumb item`
`separator`	`-`	`Custom separator between items`

Props

Prop	Type	Default	Description
`items`	`BreadcrumbItem[]`	`-`	`Array of breadcrumb items`
`separatorIcon`	`string`	`'lucide:chevron-right'`	`Iconify name for separator`
`as`	`keyof HTMLElementTagNameMap`	`'nav'`	`HTML element to render as`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root element`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Item Props

Prop	Type	Default	Description
`label`	`string`	`-`	`Display text`
`href`	`string`	`-`	`Navigation URL (omit for active page)`
`icon`	`string`	`-`	`Leading icon (Iconify name)`
`disabled`	`boolean`	`false`	`Disable this item`
`class`	`string`	`-`	`CSS classes for this item`

Toast Pagination