Black Lives Matter. Support the Equal Justice Initiative.
Skip to main contentCarbon Design System

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

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

PropTypeRequiredDefaultDescription
aria-labelstringSpecify the label for the breadcrumb container
childrennodetruePass in the BreadcrumbItem’s for your Breadcrumb
classNamestringSpecify an optional className to be applied to the container node
noTrailingSlashboolOptional 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>
PropTypeRequiredDefaultDescription
childrennodetruePass in content that will be inside of the BreadcrumbItem
classNamestringSpecify an optional className to be applied to the container node
hrefstringOptional string representing the link location for the BreadcrumbItem
isCurrentPageboolProvide if this breadcrumb item represents the current page

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>
PropTypeRequiredDefaultDescription
classNamestringSpecify an optional className to add

Feedback

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