React Breadcrumb - Flowbite

The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.

Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.

<Breadcrumb aria-label="Default breadcrumb example">
  <Breadcrumb.Item
    href="#"
    icon={HiHome}
  >
    <p>
      Home
    </p>
  </Breadcrumb.Item>
  <Breadcrumb.Item href="#">
    Projects
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    Flowbite React
  </Breadcrumb.Item>
</Breadcrumb>

<Breadcrumb
  aria-label="Solid background breadcrumb example"
  className="bg-gray-50 px-5 py-3 dark:bg-gray-900"
>
  <Breadcrumb.Item
    href="#"
    icon={HiHome}
  >
    <p>
      Home
    </p>
  </Breadcrumb.Item>
  <Breadcrumb.Item href="#">
    Projects
  </Breadcrumb.Item>
  <Breadcrumb.Item>
    Flowbite React
  </Breadcrumb.Item>
</Breadcrumb>