React Bootstrap docs

Breadcrumb

Indicate the current page's location within a navigational hierarchy.

import Breadcrumb from 'react-bootstrap/Breadcrumb'
import BreadcrumbItem from 'react-bootstrap/BreadcrumbItem'

export default function BreadcrumbDocsPage() {
  return (
    <>
      <Breadcrumb>
        <BreadcrumbItem href="#">Home</BreadcrumbItem>
        <BreadcrumbItem href="#">Products list</BreadcrumbItem>
        <BreadcrumbItem active>Single product</BreadcrumbItem>
      </Breadcrumb>

      <Breadcrumb listProps={{ className: 'align-items-center' }}>
        <BreadcrumbItem href="#" linkProps={{ className: 'd-flex' }}>
          <i className="ci-home fs-base"/>
        </BreadcrumbItem>
        <BreadcrumbItem href="#">Products list</BreadcrumbItem>
        <BreadcrumbItem active>Single product</BreadcrumbItem>
      </Breadcrumb>

      <Breadcrumb>
        <BreadcrumbItem href="#" linkProps={{ className: 'd-flex align-items-center' }}>
          <i className="ci-home fs-base me-2"/>
          Home
        </BreadcrumbItem>
        <BreadcrumbItem href="#">Products list</BreadcrumbItem>
        <BreadcrumbItem active>Single product</BreadcrumbItem>
      </Breadcrumb>
    </>
  )
}
Top