Breadcrumb

<caos-breadcrumb>

the trail back up from where you are

May be placed on a record page and a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
`items`	property only	The trail, root first, as `{ label, href? }`. The LAST entry is drawn as the current page rather than as a link, whether or not it carries an href. Setting this replaces the trail.	json	none declared	Optional

Events

This piece raises no events.

Slots

Nothing goes inside this piece.

Styling hooks

Design token	What it controls
`--caos-font`	The typeface the crumbs are set in.
`--caos-color-text-muted`	The colour of an ancestor crumb and of the chevron between crumbs.
`--caos-color-text`	The colour of the last crumb, the current page.
`--caos-color-accent`	The colour a linked crumb takes on hover.
`--caos-radius-sm`	The corner radius of the focus ring around a linked crumb.
`--caos-focus-ring`	The ring drawn on a linked crumb reached by keyboard.
`--caos-space-1`	The gap between a crumb and the chevron after it.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
`::part(nav)`	the landmark wrapping the trail	Always
`::part(list)`	the ordered list of crumbs	Always
`::part(item)`	one crumb and its separator	Always
`::part(link)`	a crumb that navigates	Always
`::part(current)`	the last crumb, the one you are on	Always
`::part(separator)`	the chevron between two crumbs	Always

When to use it

When a page has a parent worth going back to and the way back is not otherwise obvious — a record under its list, a configuration screen several levels inside Setup.

What to use instead

WorkspaceTabs — You want to move between an app’s destinations rather than climb back up from one of them.
TabStrip — The choices are facets of the record you are already on, not ancestors of it.
PageHeader — You want to name the surface and say how many things are on it, not show the trail to it.

Accessibility

The trail is a real <nav aria-label="Breadcrumb"> holding an ordered list, so it is announced as a navigation landmark and its crumbs are announced in order and counted. The last crumb is marked aria-current="page" and is deliberately not a link, and the chevrons between crumbs are hidden from assistive technology. Linked crumbs are ordinary anchors, so keyboard reach and the focus ring are already handled. What is left to the author is the LABELS: a crumb reading “Detail” tells somebody nothing about what it goes back to.

Examples

A record under its list

The ordinary form: the trail handed over as data, with the last entry drawn as the current page.

{
  "id": "example",
  "section": "A record under its list",
  "columns": 1,
  "items": [
    {
      "id": "breadcrumb_1",
      "type": "component",
      "key": "breadcrumb",
      "inputs": {
        "items": [
          {
            "label": "Sales Atlas",
            "href": "/sales"
          },
          {
            "label": "Orders",
            "href": "/sales/orders"
          },
          {
            "label": "ORD-4471"
          }
        ]
      }
    }
  ]
}

<caos-breadcrumb id="breadcrumb1"></caos-breadcrumb>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const breadcrumb1 = document.getElementById('breadcrumb1');
breadcrumb1.items = [
  {
    "label": "Sales Atlas",
    "href": "/sales"
  },
  {
    "label": "Orders",
    "href": "/sales/orders"
  },
  {
    "label": "ORD-4471"
  }
];

Written as markup

The same trail written as <a> and <span> children instead of as data — read once on connection and re-drawn, which is what a page with a fixed trail can write by hand.

Cannot be shown as a page placement: is ordinary markup, not an installable component — a page places components, never bare markup.

<caos-breadcrumb>
  <a href="/setup">Setup</a>
  <a href="/setup/objects">Object Manager</a>
  <span>Order</span>
</caos-breadcrumb>