Breadcrumb ported

Show where a page sits in a hierarchy.

Show where a page sits in a hierarchy.

Live specimen

Loading demo…

Guidance

When to use

Showing where a page sits in a hierarchy, such as Workspace, Settings, Billing.
Client-side paths like a file browser, where crumbs call onClick instead of navigating.
Paths that grow as people drill in, where new crumbs should slide in.

When not to use

Use tree-view when people need to browse the whole hierarchy.
Use tabs for switching between sibling views.
Use pagination for moving through pages of a list.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/breadcrumb

Usage

<script lang="ts">
  import { Breadcrumb } from '$lib/components/breadcrumb';
</script>

<Breadcrumb
      items={[
        { label: "Workspace", href: "/" },
        { label: "Settings", href: "/settings" },
        { label: "Billing" },
      ]}
    />

Variants & Examples

Default

Standard appearance and configuration.

<Breadcrumb
      items={[
        { label: "Workspace", href: "/" },
        { label: "Settings", href: "/settings" },
        { label: "Billing" },
      ]}
    />

API Reference

Prop	Type	Default	Description
`items`	`{ label: string; href?: string; onClick?: (event: MouseEvent<HTMLElement>) => void }[]`	–	(Required) Path from root to current page. Items with href render next/link; items with only onClick render buttons.
`ariaLabel`	`string`	'"Breadcrumb"'	Label for the nav landmark.

Keyboard Interactions

Key	Action
`Tab`	Moves between crumb links and buttons.
`Enter`	Follows the focused crumb.

Accessibility

Renders a nav landmark with an ordered list.
The last item is a span with aria-current="page" and is never a link.
Chevron separators are aria-hidden.

Motion

- Crumbs present on first render stay still; new crumbs slide in 8px from the left out of a blur while siblings shift on a smooth spring. - Reduced motion adds and removes crumbs without movement.

Notes for AI

Use for hierarchical page location. For client-side paths such as a file browser, pass onClick without href.
Keep labels short; the component does not truncate or collapse long paths.

Source of truth: registry/components/breadcrumb/breadcrumb.tsx