Navigation

Breadcrumb

Display a hierarchical navigation trail showing the user's current location within the app. Supports icons, custom separators, disabled items, and fully customizable rendering via snippets.

Playground

Experiment with different props in real-time.

Separator Icon

Basic Usage

Pass an array of items to the Breadcrumb. The last item without an href is treated as the current page.

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

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

<Breadcrumb {items} />

With Icons

Add an icon property to each item to display a leading icon using Iconify names.

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

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

<Breadcrumb {items} />

Custom Separator Icon

Change the separator between items using the separatorIcon prop.

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

Disabled Items

Set disabled: true on an item to prevent navigation and apply disabled styling.

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

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

<Breadcrumb {items} />

Custom Separator Snippet

Use the separator snippet to fully replace the default separator icon with custom markup.

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

Custom Item Snippet

Use the item snippet to fully customize how each breadcrumb item is rendered.

<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 specific internal elements of the Breadcrumb.

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

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

Snippets

Use snippets to fully replace the default rendering of items or separators with custom markup.

Snippet	Parameters	Description
`item`	`{ item, index, active }`	Custom render for each breadcrumb item — replaces the default link/label rendering
`separator`	`-`	Custom separator between items — replaces the default separator icon

Props

Prop	Type	Default	Description
`as`	`keyof HTMLElementTagNameMap`	`'nav'`	HTML element to render as
`items`	`BreadcrumbItem[]`	`-`	Array of breadcrumb items to display
`separatorIcon`	`string`	`'lucide:chevron-right'`	Iconify name for the separator icon between items
`item`	`Snippet<[{ item, index, active }]>`	`-`	Custom snippet to render each breadcrumb item
`separator`	`Snippet`	`-`	Custom snippet to render the separator between items
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override classes on internal elements

BreadcrumbItem Props

Each object in the items array accepts the following properties.

Prop	Type	Default	Description
`label`	`string`	`-`	Text content of the breadcrumb item
`href`	`string`	`-`	Navigation URL — omit for the current (active) page
`icon`	`string`	`-`	Leading icon (Iconify name)
`disabled`	`boolean`	`false`	Disables the link interaction
`class`	`string`	`-`	Additional CSS classes for this item

Toast Pagination