Breadcrumbs

Breadcrumbs consist of a list of links that help a user visualize a page's location within the hierarchical structure of a website, and allow navigation up to any of its "ancestors".

Introduction

The Breadcrumbs shows where in the site hierarchy the user is.

<Breadcrumbs>
  <Link />
  ...
</Breadcrumbs>

Playground

size

separator

Tamanho do pacote

Component

After installation, you can start building with this component using the following basic elements:

import Breadcrumbs from '@mui/joy/Breadcrumbs';

export default function MyApp() {
  return <Breadcrumbs />;
}

Basic usage

Breadcrumbs is a navigation component that is designed to be used with Link and Typography.

<Breadcrumbs separator="›" aria-label="breadcrumbs">
  {['Fry', 'Leela', 'Bender', 'Linda'].map((item: string) => (
    <Link
      // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
      onClick={(event) => event.preventDefault()}
      key={item}
      underline="hover"
      color="neutral"
      fontSize="inherit"
      href="/"
    >
      {item}
    </Link>
  ))}
  <Typography fontSize="inherit">Amy</Typography>
</Breadcrumbs>

<Breadcrumbs separator="›" aria-label="breadcrumbs">
  {['Fry', 'Leela', 'Bender', 'Linda'].map((item: string) => (
    <Link
      // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
      onClick={(event) => event.preventDefault()}
      key={item}
      underline="hover"
      color="neutral"
      fontSize="inherit"
      href="/"
    >
      {item}
    </Link>
  ))}
  <Typography fontSize="inherit">Amy</Typography>
</Breadcrumbs>

Press Enter to start editing

You can add an icon as a decorator to the Link and mix it with the color prop.

Separator

You can pass an icon component to the prop separator.

<Breadcrumbs separator={<KeyboardArrowLeft />} aria-label="breadcrumbs">
  <Typography fontSize="inherit">Amy</Typography>
  {['Fry', 'Leela', 'Bender', 'Linda'].map((item: string) => (
    <Link
      // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
      onClick={(event) => event.preventDefault()}
      key={item}
      underline="hover"
      color="neutral"
      fontSize="inherit"
      href="/"
    >
      {item}
    </Link>
  ))}
</Breadcrumbs>

<Breadcrumbs separator={<KeyboardArrowLeft />} aria-label="breadcrumbs">
  <Typography fontSize="inherit">Amy</Typography>
  {['Fry', 'Leela', 'Bender', 'Linda'].map((item: string) => (
    <Link
      // The `preventDefault` is for demonstration purposes, generally, you don't need it in your application
      onClick={(event) => event.preventDefault()}
      key={item}
      underline="hover"
      color="neutral"
      fontSize="inherit"
      href="/"
    >
      {item}
    </Link>
  ))}
</Breadcrumbs>

Press Enter to start editing

Accessibility

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/)

Be sure to add a aria-label description on the Breadcrumbs component.

The accessibility of this component relies on:

The set of links is structured using an ordered list (<ol> element).
To prevent screen reader announcement of the visual separators between links, they are hidden with aria-hidden.
A nav element labeled with aria-label identifies the structure as a breadcrumb trail and makes it a navigation landmark so that it is easy to locate.
The link to the current page has aria-current set to page.

CSS Variables

Play around with one of the CSS variables available in the breadcrumbs component to see how the design changes.

<Breadcrumbs />

CSS Variables

--Breadcrumbs-gap

Common examples

Collapsed Breadcrumbs

You can change the color of the links. You can learn more about them in Link.

You can use the Joy Breadcrumbs component together with the MUI Joy Menu component.

Breadcrumbs

Introduction

Playground

Component

Basic usage

Separator

Accessibility

CSS Variables

Common examples

Collapsed Breadcrumbs

With Menu

With `Menu`