Reactjs Material-UI BreadCrumbs component

Material-UI Breadcrumbs:

Breadcrumbs is a component defined in Material-UI, reactjs, that allows you to make selection from a range of values. You can create a navigation path using Breadcrumbs.

In this post, we will learn how to use Breadcrumbs with examples.

YouTube video:

You can watch the video on YouTube here:

Breadcrumbs component:

Breadcrumbs is the component that you need to import. It is defined in material-ui/core:

import { Breadcrumbs } from '@material-ui/core';

That's it. Now you can use it in your project.

A basic example:

Let's take a look into the below program:

import { Breadcrumbs, Link, Box } from '@material-ui/core';

function App() {
  return (
    <Box display="flex" flexDirection="column" m={10}>
      <Breadcrumbs aria-label="home pages">
        <Link color="inherit" href="/" onClick={() => {}}>
          Home
        </Link>
        <Link color="inherit" href="/" onClick={() => {}}>
          Category
        </Link>
        <Link color="inherit" href="/" onClick={() => {}}>
          Pages
        </Link>
      </Breadcrumbs>
    </Box>
  );
}

export default App;

We added three Link components inside a Breadcrumbs component. It will create the below layout:

Make sure to add the aria-label props to a breadcrumbs:

Adding Typography in a Breadcrumbs:

We can also add a Typography component in a Breadcrumbs. This will make that non-clickable.

....
....
<Typography color='textPrimary'>
    Page-1
</Typography>
</Breadcrumbs>

Changing the separator:

We can change the default separator by using the separator props as like below:

<Breadcrumbs separator="->">
  <Link color="inherit" href="/" onClick={() => {}}>
    Pages
  </Link>
  <Typography color="textPrimary">Page-1</Typography>
</Breadcrumbs>

Add one icon to the left:

We can add one icon to the left. For that, we need to put that icon in the Link component.

<Breadcrumbs>
  <Link style={{ display: 'flex' }} color="inherit" href="/" onClick={() => {}}>
    <HomeWorkOutlined style={{ width: 20, height: 20, marginRight: 5 }} />
    Home
  </Link>
  <Typography color="textPrimary">Page-1</Typography>
</Breadcrumbs>

Collapsible Breadcrumbs:

We can make one Breadcrumbs collapsible. For example, if we have too many elements, we can make it collapsible, it will show only a specific number of elements by default. If user clicks on it, it will show all other elements.

For that, we can use the maxItems props to assign the maximum items to show for a breadcrumbs.

For example:

<Breadcrumbs maxItems={2}>
  <Typography color="textPrimary">Home</Typography>
  <Typography color="textPrimary">Categories</Typography>
  <Typography color="textPrimary">All pages</Typography>
  <Typography color="textPrimary">Pages</Typography>
  <Typography color="textPrimary">Page-1</Typography>
</Breadcrumbs>

It will show only 2 items and makes it collapsible.

All examples:

import { Breadcrumbs, Link, Box, Typography } from '@material-ui/core';
import { HomeWorkOutlined } from '@material-ui/icons';

function App() {
  return (
    <Box display="flex" flexDirection="column" m={10}>
      <Breadcrumbs>
        <Link color="inherit" href="/" onClick={() => {}}>
          Home
        </Link>
        <Link color="inherit" href="/" onClick={() => {}}>
          Category
        </Link>
        <Link color="inherit" href="/" onClick={() => {}}>
          Pages
        </Link>
        <Typography color="textPrimary">Page-1</Typography>
      </Breadcrumbs>

      <Breadcrumbs separator="->">
        <Link color="inherit" href="/" onClick={() => {}}>
          Pages
        </Link>
        <Typography color="textPrimary">Page-1</Typography>
      </Breadcrumbs>

      <Breadcrumbs>
        <Link style={{ display: 'flex' }} color="inherit" href="/" onClick={() => {}}>
          <HomeWorkOutlined style={{ width: 20, height: 20, marginRight: 5 }} />
          Home
        </Link>
        <Typography color="textPrimary">Page-1</Typography>
      </Breadcrumbs>

      <Breadcrumbs maxItems={2}>
        <Typography color="textPrimary">Home</Typography>
        <Typography color="textPrimary">Categories</Typography>
        <Typography color="textPrimary">All pages</Typography>
        <Typography color="textPrimary">Pages</Typography>
        <Typography color="textPrimary">Page-1</Typography>
      </Breadcrumbs>
    </Box>
  );
}

export default App;