components breadcrumb

components/breadcrumb

Import: import { Breadcrumb } from "@tundralibs/ui/breadcrumb"

Rendered in every variant on the catalogue (deno task build:demos, then demo/index.html). Guides: Getting started · rAPId integration · Theming.

Functions

Breadcrumb

Breadcrumb(props: { items: BreadcrumbItem[]; attrs?: Attrs }): Html

Types

BreadcrumbItem

Prop	Type	Required	Description
label	string	yes
href	string

Usage

Each example as the rAPId call and the HTML it renders — the markup a plain page writes by hand. Icons are inline SVG in the real output; they are shortened to <svg …>…</svg> here.

Where the page sits

Breadcrumb({ items: [{ label: "Invoices", href: "/invoices" }, { label: "INV-2048" }] })

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb__item">
      <a class="breadcrumb__link" href="/invoices">Invoices</a>
    </li>
    <li class="breadcrumb__item" aria-current="page">INV-2048</li>
  </ol>
</nav>

CSS hooks

Classes defined by components/breadcrumb/breadcrumb.css — structural, token-driven; override from an unlayered stylesheet (see Theming):

.breadcrumb, .breadcrumb__item, .breadcrumb__link