FMX Prototype Pipeline

Breadcrumb

Horizontally-arranged crumbs separated by caret-right. Last crumb is the current page.

<Breadcrumb
  items={[
    { label: "Dashboard", href: "#" },
    { label: "Requests", current: true },
  ]}
/>

<Breadcrumb
  items={[
    { label: "Dashboard", href: "#" },
    { label: "Requests", href: "#" },
    { label: "Request #4287", current: true },
  ]}
/>

<Breadcrumb
  items={[{ label: "Dashboard", current: true }]}
/>

<Breadcrumb
  items={[
    { label: "Dashboard", href: "#" },
    { label: "Buildings", href: "#" },
    { label: "Main building", href: "#" },
    { label: "Conference Room A", current: true },
  ]}
/>

Props

items:BreadcrumbCrumb[]

Array of { label, href?, current? }. Last item defaults to current.

Tokens