Breadcrumb

Navigation

Navigation trail with 4 separator styles, icon support, 3 item styles, 3 sizes, and collapsible long paths.

Import

ts 
import Breadcrumb from '$lib/components/Breadcrumb.svelte';
import type { BreadcrumbItem } from '$lib/components/Breadcrumb.svelte';

Usage

svelte 
<script lang="ts">
  import Breadcrumb from '$lib/components/Breadcrumb.svelte';
  import type { BreadcrumbItem } from '$lib/components/Breadcrumb.svelte';

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

<Breadcrumb {items} />

Separators

Four separator styles: chevron (default), slash, dot, arrow.

chevron
slash
dot
arrow
svelte 
<Breadcrumb {items} separator="chevron" />
<Breadcrumb {items} separator="slash" />
<Breadcrumb {items} separator="dot" />
<Breadcrumb {items} separator="arrow" />

With Icons

Add an icon SVG path string to any item to display an icon before the label.

svelte 
const items: BreadcrumbItem[] = [
  { label: 'Home',      href: '/', icon: ICONS.home   },
  { label: 'Analytics', href: '#', icon: ICONS.chart  },
  { label: 'Q4 Report'                                },
];

<Breadcrumb {items} separator="chevron" />

Item Styles

The itemStyle prop controls the appearance of the current page item: plain, soft, or pill.

plain
soft
pill
svelte 
<Breadcrumb items={settingsPath} itemStyle="plain" />
<Breadcrumb items={settingsPath} itemStyle="soft" />
<Breadcrumb items={settingsPath} itemStyle="pill" />

Sizes

sm, md (default), lg.

sm
md
lg

Collapse Long Paths

Set maxVisible to truncate middle items. Click the ... ellipsis to expand them.

Collapsed — maxVisible=3 (click ... to expand)

Full path — no maxVisible

svelte 
<!-- Collapse to 3 visible items; click ··· to expand -->
<Breadcrumb items={longPath} maxVisible={3} />

Dynamic — Click to Navigate

Breadcrumb updates reactively as you navigate between pages.

Navigate to

Use Case — Dashboard Topbar

Breadcrumb placed in a topbar alongside a page title and action buttons.

Revenue Overview

Total Revenue

$48,295

+22%

This Month

$8,420

+6%

Last Month

$6,890

-3%

API Reference

PropTypeDefaultDescription
items BreadcrumbItem[]—Required. Array of breadcrumb steps. Each item: { label: string; href?: string; icon?: string }. The last item is treated as the current page.
separator 'slash' | 'chevron' | 'dot' | 'arrow''chevron'Separator rendered between items.
size 'sm' | 'md' | 'lg''md'Text and icon size.
itemStyle 'plain' | 'soft' | 'pill''plain'Visual style applied to the current (last) item.
maxVisible number0Maximum number of items to show. When exceeded, middle items collapse into a clickable ellipsis. 0 means show all.
class stringundefinedExtra CSS classes for the root nav element.