Reactstrap Breadcrumb

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

Example

import React from "react";

// reactstrap components
import { Breadcrumb, BreadcrumbItem } from "reactstrap";

function Example() {
  return (
    <>
      <Breadcrumb>
        <BreadcrumbItem active>Home</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem>
          <a href="#pablo" onClick={(e) => e.preventDefault()}>
            Home
          </a>
        </BreadcrumbItem>
        <BreadcrumbItem active>Library</BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb>
        <BreadcrumbItem>
          <a href="#pablo" onClick={(e) => e.preventDefault()}>
            Home
          </a>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <a href="#pablo" onClick={(e) => e.preventDefault()}>
            Library
          </a>
        </BreadcrumbItem>
        <BreadcrumbItem active>Data</BreadcrumbItem>
      </Breadcrumb>
    </>
  );
}

export default Example;

Dark

import React from "react";

// reactstrap components
import { Breadcrumb, BreadcrumbItem } from "reactstrap";

function Example() {
  return (
    <>
      <Breadcrumb listClassName="breadcrumb-dark bg-default">
        <BreadcrumbItem className="text-white" active>
          Home
        </BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb listClassName="breadcrumb-dark bg-primary">
        <BreadcrumbItem>
          <a
            className="text-secondary"
            href="#pablo"
            onClick={(e) => e.preventDefault()}
          >
            Home
          </a>
        </BreadcrumbItem>
        <BreadcrumbItem className="text-white" active>
          Library
        </BreadcrumbItem>
      </Breadcrumb>
      <Breadcrumb listClassName="breadcrumb-dark bg-danger">
        <BreadcrumbItem>
          <a
            className="text-secondary"
            href="#pablo"
            onClick={(e) => e.preventDefault()}
          >
            Home
          </a>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <a
            className="text-secondary"
            href="#pablo"
            onClick={(e) => e.preventDefault()}
          >
            Library
          </a>
        </BreadcrumbItem>
        <BreadcrumbItem className="text-white" active>
          Data
        </BreadcrumbItem>
      </Breadcrumb>
    </>
  );
}

export default Example;

Links

import React from "react";

// reactstrap components
import { Breadcrumb, BreadcrumbItem } from "reactstrap";

function Example() {
  return (
    <>
      <Breadcrumb>
        <BreadcrumbItem>
          <a href="#pablo" onClick={(e) => e.preventDefault()}>
            Home
          </a>
        </BreadcrumbItem>
        <BreadcrumbItem>
          <a href="#pablo" onClick={(e) => e.preventDefault()}>
            Library
          </a>
        </BreadcrumbItem>
        <BreadcrumbItem active aria-current="page">
          Data
        </BreadcrumbItem>
      </Breadcrumb>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.