Breadcrumb

How to build a breadcrumb using React. For code usage with other frameworks, please follow the links in the live demo on the usage tab.

Overview
Skeleton state
Component API
Feedback

Overview

You can build a breadcrumb using a combination of the Breadcrumb and BreadcrumbItem components. The Breadcrumb component accepts a list of BreadcrumbItem components as children and each BreadcrumbItem is responsible for displaying the page links in the hierarchy.

import { Breadcrumb, BreadcrumbItem } from "carbon-components-react";
function MyComponent() {
  return (
    <Breadcrumb>
      <BreadcrumbItem href="#">Breadcrumb 1</BreadcrumbItem>
      <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
      <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
    </Breadcrumb>

Skeleton state

You can use the BreadcrumbSkeleton component to render a skeleton variant of an breadcrumb. This is useful to display while content in your breadcrumb is being fetched from an external resource like an API.

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbSkeleton,
} from "carbon-components-react";
function MyComponent({ isLoading }) {
  if (isLoading) {
    return <BreadcrumbSkeleton />;

Component API

Prop	Type	Required	Default	Description
aria-label	`string`	–	–	Specify the label for the breadcrumb container
children	`node`	`true`	–	Pass in the BreadcrumbItem’s for your Breadcrumb
className	`string`	–	–	Specify an optional className to be applied to the container node
noTrailingSlash	`bool`	–	–	Optional prop to omit the trailing slash for the breadcrumbs

You can use the noTrailingSlash prop to omit the slash from the end of the current page.

<Breadcrumb noTrailingSlash>
  <BreadcrumbItem href="#">Breadcrumb 1</BreadcrumbItem>
  <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
  <BreadcrumbItem href="#">Breadcrumb 3</BreadcrumbItem>
</Breadcrumb>

BreadcrumbItem props

Prop	Type	Required	Default	Description
children	`node`	`true`	–	Pass in content that will be inside of the BreadcrumbItem
className	`string`	–	–	Specify an optional className to be applied to the container node
href	`string`	–	–	Optional string representing the link location for the BreadcrumbItem
isCurrentPage	`bool`	–	–	Provide if this breadcrumb item represents the current page

BreadcrumbItem isCurrentPage

You can use the isCurrentPage prop on a BreadcrumbItem to represent the current page.

<Breadcrumb>
  <BreadcrumbItem href="#">Breadcrumb 1</BreadcrumbItem>
  <BreadcrumbItem href="#">Breadcrumb 2</BreadcrumbItem>
  <BreadcrumbItem href="#" isCurrentPage>
    Breadcrumb 3
  </BreadcrumbItem>
</Breadcrumb>

BreadcrumbSkeleton props

Prop	Type	Required	Default	Description
className	`string`	–	–	Specify an optional className to add

Feedback

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Edit this page on GitHub

Breadcrumb: Style

Breadcrumb: Accessibility