Breadcrumbs

A navigation trail (root → current). Link crumbs are Button variant="ghost"; the last crumb is the current page (aria-current, not a link). A long trail collapses its middle into a ⋯ that opens a Menu of the hidden crumbs. Composes library components only.

Basic

<script>
  import { Breadcrumbs } from '@spaethtech/svelte-ui';
  const trail = [
    { label: 'Home', href: '/' },
    { label: 'Components', href: '/components' },
    { label: 'Breadcrumbs' }, // last = current page
  ];
</script>

<Breadcrumbs items={trail} />

Collapsed (maxItems)

Click the ⋯ to reveal Workspace / Projects / svelte-ui / src in a menu.

<!-- Long trail: collapse the middle to a ⋯ that opens a Menu of hidden crumbs -->
<Breadcrumbs items={deep} maxItems={4} />

Breadcrumbs

Basic

Collapsed (maxItems)

Custom separator & sizes