# Breadcrumb

> A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Navigation
- Tags: breadcrumb, trail, navigation, truncation
- Docs: https://fancy-ui.rama.app/docs/components/breadcrumb
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/breadcrumb

## Import

```svelte
<script lang="ts">
  import { Breadcrumb } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { Breadcrumb } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `BreadcrumbItem[]` | — | The full trail, first to last. The last entry is always the current page. |
| `maxItems` | `number` | `0` | Collapse the trail once it holds more than this many items. 0 never collapses. |
| `itemsBeforeCollapse` | `number` | `1` | How many leading items stay visible once collapsed. |
| `itemsAfterCollapse` | `number` | `1` | How many trailing items stay visible once collapsed. Floored at 1 — the current page is never hidden. |
| `separator` | `string` | `"/"` | Separator glyph rendered between crumbs. Decorative — never read by a screen reader. |
| `label` | `string` | `"Breadcrumb"` | Accessible name for the nav. |
| `class` | `string` | — | Additional CSS classes, merged onto the nav. |
| `ref` | `HTMLElement \| null` | `null` | Bindable reference to the nav element. |
| `sound` | `boolean` | `false` | Plays select when a default-rendered crumb link is activated, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `item` | Custom rendering for one crumb, given the item and its index in items (Snippet<[BreadcrumbItem, number]>). Optional — fully replaces the default link/current-page rendering, including aria-current, once supplied. |

## Examples

### Basic Usage

A three-level trail; the last item is the current page.

```svelte
<script lang="ts">
	import { Breadcrumb } from "fancy-ui-svelte";
	import type { BreadcrumbItem } from "fancy-ui-svelte";

	const items: BreadcrumbItem[] = [
		{ label: "Docs", href: "/docs" },
		{ label: "Core", href: "/docs/core" },
		{ label: "Button" },
	];
</script>

<Breadcrumb sound {items} />
```

### Truncated

A five-level trail collapsed to first, ellipsis, and last two.

```svelte
<script lang="ts">
	import { Breadcrumb } from "fancy-ui-svelte";
	import type { BreadcrumbItem } from "fancy-ui-svelte";

	const items: BreadcrumbItem[] = [
		{ label: "Docs", href: "/docs" },
		{ label: "Core", href: "/docs/core" },
		{ label: "Navigation", href: "/docs/core/navigation" },
		{ label: "Components", href: "/docs/core/navigation/components" },
		{ label: "Button" },
	];
</script>

<Breadcrumb sound {items} maxItems={3} />
```

### Custom Separator

A '>' glyph in place of the default slash.

```svelte
<script lang="ts">
	import { Breadcrumb } from "fancy-ui-svelte";
	import type { BreadcrumbItem } from "fancy-ui-svelte";

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

<Breadcrumb sound {items} separator=">" />
```