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. For the primary navigation itself, see NavigationMenu.

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 NavigationMenu