Breadcrumb macrolite

The path to the current page; every item but the last is a link that fires select with its value.

Built from: Box Button Icon Text
Children: none

Preview

Loading the renderer…

itemsrequired

createSurface + updateComponents, A2UI v0.9.

json

[
  {
    "version": "v0.9",
    "createSurface": {
      "surfaceId": "preview",
      "catalogId": "https://ui.exponential.at/catalogs/core/v1"
    }
  },
  {
    "version": "v0.9",
    "updateComponents": {
      "surfaceId": "preview",
      "components": [
        {
          "id": "root",
          "component": "Stack",
          "direction": "vertical",
          "align": "stretch",
          "children": [
            "example"
          ]
        },
        {
          "id": "example",
          "component": "Breadcrumb",
          "items": [
            {
              "label": "Boards",
              "value": "boards"
            },
            {
              "label": "Sprint 12",
              "value": "sprint-12"
            },
            {
              "label": "EXP-42",
              "value": "exp-42"
            }
          ]
        }
      ]
    }
  }
]

This surface through a MemoryTransport. Install and transports: React guide.

This surface through a MemoryTransport. Install and transports: SwiftUI guide.

This surface through a MemoryTransport. Install and transports: Compose guide.

This surface through a MemoryTransport. Install and transports: gpui guide.

Platforms

Breadcrumb rendered by the React renderer on Web — **Web** React

Breadcrumb rendered by the SwiftUI renderer on iOS — **iOS** SwiftUI

Breadcrumb rendered by the Compose renderer on Android — **Android** Compose

Breadcrumb rendered by the gpui renderer on Desktop — **Desktop** gpui

View exponential-ui-breadcrumb, painted by each native renderer.

Props

Prop	Type	Default	Description
`items`required	`[option]`	–	The path from the root to the current page.

Events and slots

Name	Kind
`on.select`	event: runs an action

Accessibility

Role: navigation
Semantics: navigation (breadcrumb); the last item aria-current=page. Labelled breadcrumb; the last item aria-current=page ($a11y).

Keys	Action
`Tab through the links; Enter`	select

Theming

Recipe parts: Breadcrumb/rootBreadcrumb/itemBreadcrumb/separatorBreadcrumb/linkBreadcrumb/current
Keyed by: current:hover:pressed:focus:disabled:checked:open:selected:invalid:dragover

Themes · Write a theme