Introduction

A navigation aid that shows the current page's location within a hierarchy using a list of links.

Usage

Basic Breadcrumb

import { Breadcrumb } from "../components/ui";

export default function MyPage() {
  return (
    <Breadcrumb
      items={[
        { label: "Home", href: "/" },
        { label: "Components", href: "/components" },
        { label: "Breadcrumb" },
      ]}
    />
  );
}

Custom Separator

import { Breadcrumb } from "../components/ui";

export default function MyPage() {
  return (
    <Breadcrumb
      separator="/"
      items={[
        { label: "Home", href: "/" },
        { label: "Breadcrumb" },
      ]}
    />
  );
}

CMS Page Builder

This component is available as a breadcrumb block in the Page Builder (content/pages/*.json):

{
  "type": "breadcrumb",
  "items": [
    { "label": "Home", "href": "/" },
    { "label": "Docs", "href": "/docs" },
    { "label": "Breadcrumb" }
  ],
  "variant": "underline",
  "size": "md"
}

Props

Breadcrumb

Prop	Type	Description
items	BreadcrumbItem[]	The breadcrumb items to render.
separator	Child	Custom separator between items. Default: a chevron-right icon.

| variant | `"underline" \ | "plain"` | The visual style of the breadcrumb. |

| size | `"xs" \ | "sm" \ | "md" \ | "lg"` | The size of the breadcrumb. |

| class | string | Custom CSS classes for the root element. |

BreadcrumbItem

Property	Type	Description
label	Child	Display text or JSX node.
href	string	If present, renders as a link; otherwise renders as plain text (current page).
current	boolean	Marks the current page. Defaults to true for the last item.