Breadcrumbs

Basic Breadcrumbs

Breadcrumbs should be placed directly above the page title, and in the same area on every page. Do not link to "current page".

Do not use breadcrumbs on websites with less than three levels.

<Breadcrumbs>
  <Breadcrumbs.Item>
    <a href="#path/to/home">Home</a>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <a href="#path/to/home/sub-page">Sub-page</a>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>Current page</Breadcrumbs.Item>
</Breadcrumbs>
<Breadcrumbs>
  <Breadcrumbs.Item>
    <a href="#path/to/home">Home</a>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <a href="#path/to/home/sub-page">Sub-page</a>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>Current page</Breadcrumbs.Item>
</Breadcrumbs>

Back and forward buttons

<Breadcrumbs>
  <Button variant="flat" small pill noPadding>
    <Icon icon={faAngleLeft}></Icon>
  </Button>
  <Button variant="flat" small pill noPadding disabled>
    <Icon icon={faAngleRight}></Icon>
  </Button>
  <Breadcrumbs.Item>
    <a href="#path/to/home">Home</a>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <a href="#path/to/home/tickets">Tickets</a>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>Please help me with my computer</Breadcrumbs.Item>
</Breadcrumbs>
<Breadcrumbs>
  <Button variant="flat" small pill noPadding>
    <Icon icon={faAngleLeft}></Icon>
  </Button>
  <Button variant="flat" small pill noPadding disabled>
    <Icon icon={faAngleRight}></Icon>
  </Button>
  <Breadcrumbs.Item>
    <a href="#path/to/home">Home</a>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>
    <a href="#path/to/home/tickets">Tickets</a>
  </Breadcrumbs.Item>
  <Breadcrumbs.Item>Please help me with my computer</Breadcrumbs.Item>
</Breadcrumbs>

Sandbox

import React from "react";
import Breadcrumbs from "@intility/bifrost-react/Breadcrumbs";

export default function () {
  return (
    <>
      <Breadcrumbs>
        <Breadcrumbs.Item>
          <a href="/react/breadcrumbs">Front page</a>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <a href="/react/breadcrumbs">Components</a>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <a href="/react/breadcrumbs">Navigation</a>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>Breadcrumbs</Breadcrumbs.Item>
      </Breadcrumbs>
    </>
  );
}

Responsive sites

For small screens you may not wish to display the full path, instead only a link to the parent page. Since Bifrost is router agnostic, it's not something that is supported out of the box, but can be implemented easily enough using breakpoint CSS classes and a custom component. Here is an example using <NavLink> from react-router-dom v6.

import NavLink from "react-router-dom"; // v6
import Breadcrumbs from "@intility/bifrost-react/Breadcrumbs";
import Icon from "@intility/bifrost-react/Icon";
import { faAngleLeft } from "@fortawesome/pro-light-svg-icons";

/**
 * Displays full breadcrumb path for large screens, but only the last item with a path for mobile
 * @example
 * <ResponsiveCrumbs
 *   items={[
 *     { name: 'Home', path: '/' },
 *     { name: 'Sub page', path: '..' }, // will be displayed for mobile
 *     { name: 'Current page' }
 *   ]}
 * />
 */
const ResponsiveCrumbs = ({ items }) => {
  // find last item with a path
  const singleMobileItem = [...items].reverse().find((x) => x.path);
  // short circuit if no items have a path
  if (!singleMobileItem?.path) return null;
  return (
    <>
      <Breadcrumbs className="to-small">
        <Breadcrumbs.Item>
          <NavLink to={singleMobileItem.path}>
            <Icon icon={faAngleLeft} marginRight />
            {singleMobileItem.name}
          </NavLink>
        </Breadcrumbs.Item>
      </Breadcrumbs>
      <Breadcrumbs className="from-small">
        {items.map(({ name, path }) =>
          path ? (
            <Breadcrumbs.Item key={name}>
              <NavLink to={path}>{name}</NavLink>
            </Breadcrumbs.Item>
          ) : (
            <Breadcrumbs.Item key={name}>{name}</Breadcrumbs.Item>
          ),
        )}
      </Breadcrumbs>
    </>
  );
};
import NavLink from "react-router-dom"; // v6
import Breadcrumbs from "@intility/bifrost-react/Breadcrumbs";
import Icon from "@intility/bifrost-react/Icon";
import { faAngleLeft } from "@fortawesome/pro-light-svg-icons";

/**
 * Displays full breadcrumb path for large screens, but only the last item with a path for mobile
 * @example
 * <ResponsiveCrumbs
 *   items={[
 *     { name: 'Home', path: '/' },
 *     { name: 'Sub page', path: '..' }, // will be displayed for mobile
 *     { name: 'Current page' }
 *   ]}
 * />
 */
const ResponsiveCrumbs = ({ items }) => {
  // find last item with a path
  const singleMobileItem = [...items].reverse().find((x) => x.path);
  // short circuit if no items have a path
  if (!singleMobileItem?.path) return null;
  return (
    <>
      <Breadcrumbs className="to-small">
        <Breadcrumbs.Item>
          <NavLink to={singleMobileItem.path}>
            <Icon icon={faAngleLeft} marginRight />
            {singleMobileItem.name}
          </NavLink>
        </Breadcrumbs.Item>
      </Breadcrumbs>
      <Breadcrumbs className="from-small">
        {items.map(({ name, path }) =>
          path ? (
            <Breadcrumbs.Item key={name}>
              <NavLink to={path}>{name}</NavLink>
            </Breadcrumbs.Item>
          ) : (
            <Breadcrumbs.Item key={name}>{name}</Breadcrumbs.Item>
          ),
        )}
      </Breadcrumbs>
    </>
  );
};