Breadcrumbs

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Example

Add active prop to the active Breadcrumb.Item. Do not set both active and href attributes. active overrides href and span element is rendered instead of a.

Result

Loading...

Live Editor

import Breadcrumb from 'react-bootstrap/Breadcrumb'; function BreadcrumbExample() { return ( <Breadcrumb> <Breadcrumb.Item href="#">Home</Breadcrumb.Item> <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/"> Library </Breadcrumb.Item> <Breadcrumb.Item active>Data</Breadcrumb.Item> </Breadcrumb> ); } export default BreadcrumbExample;

import Breadcrumb from 'react-bootstrap/Breadcrumb';

function BreadcrumbExample() {
  return (
    <Breadcrumb>
      <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
      <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/">
        Library
      </Breadcrumb.Item>
      <Breadcrumb.Item active>Data</Breadcrumb.Item>
    </Breadcrumb>
  );
}

export default BreadcrumbExample;

API

Breadcrumb

BreadcrumbItem