Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
Preview
<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 {items} />Installation
Usage
<script lang="ts">
import { Breadcrumb } from 'fancy-ui-svelte';
</script>
<Breadcrumb />Examples
Basic Usage
A three-level trail; the last item is the current page.
<script lang="ts">
import { Breadcrumb } from "$lib/fancy-ui/breadcrumb";
import type { BreadcrumbItem } from "$lib/fancy-ui/breadcrumb";
const items: BreadcrumbItem[] = [
{ label: "Docs", href: "/docs" },
{ label: "Core", href: "/docs/core" },
{ label: "Button" },
];
</script>
<Breadcrumb {items} />Truncated
A five-level trail collapsed to first, ellipsis, and last two.
<script lang="ts">
import { Breadcrumb } from "$lib/fancy-ui/breadcrumb";
import type { BreadcrumbItem } from "$lib/fancy-ui/breadcrumb";
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 {items} maxItems={3} />Custom Separator
A '>' glyph in place of the default slash.
<script lang="ts">
import { Breadcrumb } from "$lib/fancy-ui/breadcrumb";
import type { BreadcrumbItem } from "$lib/fancy-ui/breadcrumb";
const items: BreadcrumbItem[] = [
{ label: "Home", href: "/" },
{ label: "Settings", href: "/settings" },
{ label: "Profile" },
];
</script>
<Breadcrumb {items} separator=">" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items * | 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. |
Slots
| Slot | 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. |
Links
Related components
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
Dock
Icon dock where each item magnifies smoothly as the cursor approaches, sharing pointer position via Svelte context so every DockIcon scales by proximity within a configurable magnification and distance range