Breadcrumb

Segmented trail of links with chevron dividers and a current-page state.

Usage

svelte

<script lang="ts">
  import { Breadcrumb } from "@milandekruijf/ui/svelte";
</script>

<Breadcrumb
  ariaLabel="Breadcrumb"
  items={[{ label: "Design", href: "/design" }, { label: "Components" }]}
/>

Examples

Docs trail

<script lang="ts">
  import { Breadcrumb, type BreadcrumbItem } from "@milandekruijf/ui/svelte";

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

<Breadcrumb {items} ariaLabel="Example breadcrumb" />

Props

Prop	Type	Default	Description
items	`BreadcrumbItem[]`	—	Trail entries as `{ label, href? }`; the final item renders as the current page.
ariaLabel	`string`	—	Accessible name for the navigation landmark.
class?	`string`	—	Extra classes merged on the root.