Einführung

Eine Navigationshilfe, die den Standort der aktuellen Seite innerhalb einer Hierarchie mithilfe einer Liste von Links anzeigt.

Verwendung

Einfacher Brotkrümel

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

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

Benutzerdefinierter Trenner

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

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

CMS-Seitenbauer

Diese Komponente ist als breadcrumb-Block im Seitenbauer (content/pages/*.json) verfügbar:

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

Eigenschaften

Brotkrümel

Eigenschaft	Typ	Beschreibung
items	BreadcrumbItem[]	Die zu rendernden Brotkrümel-Einträge.
separator	Child	Benutzerdefinierter Trenner zwischen den Einträgen. Standard: ein Pfeil-nach-rechts-Symbol.

| variant | `"underline" \ | "plain"` | Der visuelle Stil des Brotkrümels. |

| size | `"xs" \ | "sm" \ | "md" \ | "lg"` | Die Größe des Brotkrümels. |

| class | string | Benutzerdefinierte CSS-Klassen für das Wurzelelement. |

BreadcrumbItem

Eigenschaft	Typ	Beschreibung
label	Child	Anzuzeigender Text oder JSX-Knoten.
href	string	Wenn vorhanden, als Link gerendert; andernfalls als einfacher Text (aktuelle Seite) gerendert.
current	boolean	Markiert die aktuelle Seite. Standardmäßig true für den letzten Eintrag.