Skip to content

← All components

Navigation and interaction

Breadcrumbs

Hierarchical page trail with a current-page endpoint.

Live example

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

tsx
import { Breadcrumbs } from "@cofob/design-system-react";

/**
 * Complete Breadcrumbs parameter reference.
 * @param items
 *   type: readonly adapter-specific item[]
 *   required
 *   example: {items}
 * @param label
 *   type: string | renderable content
 *   default: "Breadcrumb"
 *   example: "Accessible label"
 * @param nav attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function BreadcrumbsExample() {
  return (
    <Breadcrumbs items={breadcrumbs} />
  );
}

Svelte

svelte
<script lang="ts">
  import { Breadcrumbs } from "@cofob/design-system-svelte";

  // Complete Breadcrumbs parameter reference.
  // items
  //   type: readonly adapter-specific item[]
  //   required
  //   example: {items}
  // label
  //   type: string | renderable content
  //   default: "Breadcrumb"
  //   example: "Accessible label"
  // nav attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Breadcrumbs items={breadcrumbs} />

HTML

html
<!--
  Complete Breadcrumbs parameter reference.
  items
    type: readonly adapter-specific item[]
    required
    example: {items}
  label
    type: string | renderable content
    default: "Breadcrumb"
    example: "Accessible label"
  nav attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<nav class="cf-breadcrumbs" aria-label="Breadcrumb"><ol>…</ol></nav>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

ParameterTypeDefaultAdaptersExampleDescription
itemsrequiredreadonly adapter-specific item[]requiredReact · Svelte · HTML{items}Structured items including IDs, labels, disabled state, and optional destinations.
labelstring | renderable content"Breadcrumb"React · Svelte · HTML"Accessible label"Visible or accessible name, depending on the component.
nav attributesnative element attributes—React · Svelte · HTMLclass / style / aria-* / data-*Forwards native class/style, accessibility, event, and data attributes to the root element.