Breadcrumbs

Use Breadcrumbs to display the path of a current page or view inside an application.

<Breadcrumbs
  items={
    Array [
      "First level",
      "Second level",
      "Third level",
    ]
  }
/>

Sizes

<React.Fragment>
  <Breadcrumbs
    items={
      Array [
        "First",
        "Second",
        "Third",
      ]
    }
    size="sm"
  />
  <Breadcrumbs
    items={
      Array [
        "First",
        "Second",
        "Third",
      ]
    }
    size="md"
  />
</React.Fragment>

Colors

<React.Fragment>
  <Breadcrumbs
    color="dark"
    items={
      Array [
        "First",
        "Second",
        "Third",
      ]
    }
  />
  <Breadcrumbs
    color="light"
    items={
      Array [
        "First",
        "Second",
        "Third",
      ]
    }
  />
</React.Fragment>

Highlight search words

Use the searchWords property to highlight several words inside the breadcrumbs.

<Breadcrumbs
  items={
    Array [
      "First level",
      "Second level",
      "Third level",
    ]
  }
  searchWords={
    Array [
      "second",
    ]
  }
/>