Breadcrumbs

Renders a series of links along the path to an item.

Breadcrumbs @"src/components/Breadcrumbs"

Edit the props to see this component update live!

jsx

<Box sx={{ pl: "1em", color: "white", background: "secondary" }}>
  <Breadcrumbs data={breadcrumbsData} inactiveLinkColor="#fdb2c3" />
</Box>

<Box sx={{ pl: "1em", color: "white", background: "secondary" }}>
  <Breadcrumbs data={breadcrumbsData} inactiveLinkColor="#fdb2c3" />
</Box>

Data

Data consists of an object defining the link to the item (current page) and an array of links along the path the current page.

json

{
  "item": {
    "id": "f150a922-f0b9-497e-b9b1-bcadfe0e9e0c",
    "label": "FashionGram",
    "slug": "fashiongram",
    "url": "/documentation/topics/fashiongram"
  },
  "breadcrumbs": [
    {
      "id": "375c344e-125b-4dd7-a58b-2216fae41abb",
      "label": "Home",
      "slug": "home",
      "url": "/"
    },
    {
      "id": "0e6e9312-b730-443e-836a-5a4b7b619973",
      "label": "Documentation",
      "slug": "documentation",
      "url": "/documentation/"
    },
    {
      "id": "b28a1ceb-5e6b-44ad-9413-fe283b0404ad",
      "label": "Topics",
      "slug": "topics",
      "url": "/documentation/topics/"
    }
  ]
}