Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Effectively Implement MUI Breadcrumbs in React

Improving the user experience (UX) on your website cuts across many things – from using the right color scheme to choosing an appropriate font to adding animations to implementing MUI breadcrumbs in your web applications.

Breadcrumbs play a crucial role in enhancing user navigation. Breadcrumbs provide your users with a visual trail of their current location within your web application, offering a clear path back to previous pages. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. This “breadcrumb trail” significantly improves the overall user experience by simplifying the navigation process, especially in applications with nested or hierarchical structures.

Consider a scenario where a user explores different sections of a web application. Breadcrumbs act as a virtual map, allowing your users to comprehend their position and easily backtrack to parent pages. This simplicity in navigation is particularly valuable in complex applications, web dashboards, or content-heavy platforms.

In this article, I will walk you through setting up the MUI Breadcrumbs component in a React application, you will learn how to create dynamic breadcrumbs based on the current route in your application (we would make use of the react-router-dom library), also, you will learn about the best practices when creating breadcrumbs and some of the mistakes to avoid.

If you’re excited as much as I am writing this, let’s dive right in 🚀

Overview of Material-UI Breadcrumbs

MUI (Material-UI), is a popular React component library that provides a set of pre-designed components adhering to the Material Design principles. With the release of Material-UI v5, numerous enhancements, performance optimizations, and new functionalities have been introduced, making it a compelling option for front-end development. Among these components, Material-UI offers a dedicated Breadcrumbs component that simplifies the implementation of breadcrumb navigation in React applications.

By using Breadcrumbs MUI’s component , you can create a visually appealing and responsive breadcrumb trail effortlessly. Integrating this component into a React project enhances the application’s navigation capabilities and contributes to a seamless and improved user experience.

If you want to be a 5x developer and skip the hard part of building UIs from scratch, Purecode.ai has a repository of 10,000+ custom-generated AI components for MUI, TailwindCSS, and CSS3. Consider using our AI-generated custom components today!

Understanding the Significance of MUI Breadcrumbs

The significance of breadcrumbs lies in their ability to provide users with contextual awareness and efficient navigation. As users delve into various sections of a web application, breadcrumbs offer a hierarchical representation of the page structure. This representation enables users to understand the relationships between different pages and facilitates quick navigation to parent pages.

Implementing breadcrumbs effectively involves not only the visual representation but also the dynamic generation of links based on the current route.

Want to skip ahead? Learn about implementing breadcrumbs using MUI in this 6-minute YouTube video:

Implementing Material UI Breadcrumb Component

Now you understand what Material UI library is, and the significance of breadcrumbs to UX, let’s learn how to install React and the MUI library, and its breadcrumb component.

Prerequisites

Before creating the MUI Breadcrumbs component, you need to have the following:

  • NPM is installed on your machine.

  • Basic knowledge of JavaScript and React.

If you need help getting started with React, please check out the video tutorial below.

Setting up a React App

In your terminal, enter the following command to create a new React application:

npx create-react-app my-app && cd my-app

Once your app is set up, run the application by entering either of these commands in your terminal:

yarn start

Or using npm:

npm start

Your server should launch in your browser at http://localhost:3000/, as shown below:

How to Install Material UI

To get set up with MUI, you can install it as an NPM package or use Yarn.

npm install @material-ui/core

or

yarn add @material-ui/core

Once the MUI library is successfully installed, you are all set to start using the Material UI components in your React application.

Basic Implementation of MUI Breadcrumb

This code snippet below demonstrates a basic implementation of MUI Breadcrumb ⬇

import React from "react";
import ReactDOM from "react-dom";
import { Box, Typography, Breadcrumbs, Link } from "@material-ui/core";
import "./styles.css";

function App() {
  return (
    <Box
      component="section"
      sx={{
        p: 6,
        border: "1px dashed grey",
        backgroundColor: "#9966ff",
        backgroundImage: "url(<https://play.tailwindcss.com/img/beams.jpg>)",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
        height: "450px",
        width: "500px",
        display: "flex"
      }}
    >
      <Breadcrumbs aria-label="breadcrumb">
        <Link underline="hover" color="inherit" href="/">
          Home
        </Link>
        <Link
          underline="hover"
          color="inherit"
          href="/blog"
        >
          Blogs
        </Link>
        <Typography color="text.primary">Implement MUI Breadcrumb</Typography>
      </Breadcrumbs>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In the code above, we did the following:

  • Import Box, Typography, Breadcrumbs, and Link components from the @material-ui library;
  • For the Breadcrumbs navigation, we used the “aria-label” attribute with the text “breadcrumb” to provide an accessible label that can be read by screen readers. The aria-label gives a label to elements that assists users of screen readers by reading the supplied text, so when a screen reader comes across the Breadcrumbs navigation, it will read out “breadcrumb” to identify what the element is.
  • We used the Link component from the @material-ui library as children elements to the Breadcrumbs component. This statically renders link elements;
  • Finally, we used the Typography component to let the user know where they are on the page.

Passing Props to the Breadcrumbs Component

The MUI Breadcrumb component has built-in props that can be passed to the component to customize the component. Here are some examples:

How to Use Custom Separator

You can pass in a custom separator using the separator property to change the separator from the default forward slash (/) to anything, even a component. The code snippets below demonstrate this.

<Breadcrumbs aria-label="breadcrumb" separator=">">
  <Link underline="hover" color="inherit" href="/">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="/blog">
    Blogs
  </Link>
  <Typography color="text.primary">Implement MUI Breadcrumb</Typography>
</Breadcrumbs>

<Breadcrumbs aria-label="breadcrumb" separator="-">
  <Link underline="hover" color="inherit" href="/">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="/blog">
    Blogs
  </Link>
  <Typography color="text.primary">
    Implement MUI Breadcrumb
  </Typography>
</Breadcrumbs>

Passing a custom icon component NavigateNextIcon to the separator property

...
import { Typography, Breadcrumbs, Link } from "@material-ui/core";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";

...

<Breadcrumbs aria-label="breadcrumb" separator={<NavigateNextIcon />}>
  <Link underline="hover" color="inherit" href="/">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="/blog">
    Blogs
  </Link>
  <Typography color="text.primary">
    Implement MUI Breadcrumb
  </Typography>
</Breadcrumbs>

How to Make Collapsed Breadcrumbs

To make breadcrumbs collapsible, you can set the maximum items that should be rendered using the maxItems property. This will now collapse the breadcrumbs once the limit of items to be rendered is reached

The code example below demonstrates how to collapse the breadcrumbs:

...
import { Typography, Breadcrumbs, Link } from "@material-ui/core";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";

...

<Breadcrumbs
  aria-label="breadcrumb"
  maxItems={2}
  separator={<NavigateNextIcon />}
>
  <Link underline="hover" color="inherit" href="/">
    Home
  </Link>
  <Link underline="hover" color="inherit" href="/blog">
    Blogs
  </Link>
  <Typography color="text.primary">Implement MUI Breadcrumb</Typography>
</Breadcrumbs>

Dynamic Implementation with react-router-dom Library

In this section, I will walk you through how to use the react-router-dom library to dynamically create breadcrumbs based on the link. You will create another React app for this section. The importance of dynamically implementation is that the crumbs will be automatically generated based on the page’s link.

Please refer back to “Setting up a React App” to create a new React application.

Next, install MUI. Refer to “How to Install Material UI

Installing and Importing the Library: react-router-dom

Run this command to install the react-router-dom library:

npm i react-router-dom

In your src folder, create a new folder named components. Then create the following files Breadcrumb.jsx, Designer.jsx, Engineer.jsx, Home.jsx, Jobs.jsx, and Marketer.jsx.

Next, paste the following codes into the respective files you just created:

// src/components/Breadcrumbs.jsx

import React from "react";
import {
  Breadcrumbs as MUIBreadcrumbs,
  Link,
  Typography
} from "@material-ui/core";
import { withRouter } from "react-router-dom";

const Breadcrumbs = props => {
  const {
    history,
    location: { pathname }
  } = props;
  const pathnames = pathname.split("/").filter(x => x);
  return (
    <MUIBreadcrumbs aria-label="breadcrumb">
      {pathnames.length > 0 ? (
        <Link onClick={() => history.push("/")}>Home</Link>
      ) : (
        <Typography> Home </Typography>
      )}
      {pathnames.map((name, index) => {
        const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
        const isLast = index === pathnames.length - 1;
        return isLast ? (
          <Typography key={name}>{name}</Typography>
        ) : (
          <Link key={name} onClick={() => history.push(routeTo)}>
            {name}
          </Link>
        );
      })}
    </MUIBreadcrumbs>
  );
};

export default withRouter(Breadcrumbs);

// src/components/Designer.jsx

import React from "react";

const Designer = () => {
  return <div>Apply for our designer position!</div>;
};

export default Designer;

// src/components/Engineer.jsx

import React from "react";

const Engineer = () => {
  return <div>Apply to be an engineer!</div>;
};

export default Engineer;

// src/components/Home.jsx

import React from "react";
import { Button } from "@material-ui/core";

const Home = props => {
  const { history } = props;
  return (
    <>
      <Button onClick={() => history.push("/about")}>ABOUT</Button>
      <Button onClick={() => history.push("/jobs")}>JOBS</Button>
    </>
  );
};

export default Home;

// src/components/Jobs.jsx

import React from "react";
import { Button } from "@material-ui/core";

const Jobs = props => {
  const { history } = props;
  return (
    <>
      <Button onClick={() => history.push("/jobs/engineer")}>engineer</Button>
      <Button onClick={() => history.push("/jobs/marketer")}>marketer</Button>
      <Button onClick={() => history.push("/jobs/designer")}>designer</Button>
    </>
  );
};

export default Jobs;

// src/components/Marketer.jsx

import React from "react";

const Marketer = () => {
  return <div>Become a marketer for our company!</div>;
};

export default Marketer;

Then, paste this code into the index.js file:

// index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  rootElement
);

Finally, paste the following code into your App.js file:

// src/App.js.js

import React from "react";
import "./styles.css";
import Home from "../src/components/Home";
import About from "../src/components/About";
import { Route, Switch } from "react-router-dom";
import Jobs from "../src/components/Jobs";
import Engineer from "../src/components/Engineer";
import Marketer from "../src/components/Marketer";
import Designer from "../src/components/Designer";
import Breadcrumbs from "../src/components/Breadcrumbs";
import { Box } from "@material-ui/core";

export default function App() {
  return (
    <>
      <Box
        component="section"
        sx={{
          p: 6,
          border: "1px dashed grey",
          backgroundColor: "#9966ff",
          backgroundImage: "url(https://i.postimg.cc/d34GbtF3/image.png)",
          backgroundRepeat: "no-repeat",
          backgroundSize: "cover",
          height: "450px",
          width: "90%",
          display: "flex",
          flexDirection: "column",
          gap: "1rem"
        }}
      >
        <Breadcrumbs />
        <Switch>
          <Route exact from="/" render={(props) => <Home {...props} />} />
          <Route exact path="/about" render={(props) => <About {...props} />} />
          <Route exact path="/jobs" render={(props) => <Jobs {...props} />} />
          <Route
            exact
            path="/jobs/engineer"
            render={(props) => <Engineer {...props} />}
          />
          <Route
            exact
            path="/jobs/marketer"
            render={(props) => <Marketer {...props} />}
          />
          <Route
            exact
            path="/jobs/designer"
            render={(props) => <Designer {...props} />}
          />
        </Switch>
      </Box>
    </>
  );
}

Check out the completed app on CodeSandBox.

Common Mistakes to Avoid with Material-UI Breadcrumbs

While implementing Material-UI Breadcrumbs in React, developers may encounter common pitfalls that can impact the functionality and user experience negatively.

Factor in Dynamic Routes

One common mistake is overlooking the handling of dynamic routes initially. It’s essential to extend the breadcrumb solution to accommodate dynamic routes, ensuring seamless navigation in scenarios where routes are generated dynamically.

To lay a strong foundation for an effective breadcrumb implementation, start by defining a basic component structure that utilizes the MUI Breadcrumb component.

Incorporate the necessary dependencies and begin with static routes, progressively extending the solution to handle dynamic routes.

Last Breadcrumb Must Be a Text

Be mindful of rendering considerations, such as avoiding unnecessary links for the last breadcrumb when the user is already on the corresponding page. In our examples, we made use of the Typography component in MUI instead of the Link component, since we are just rendering text.

By addressing these considerations and building upon a well-structured foundation, you can successfully implement MUI Breadcrumbs in React, contributing to an enhanced user experience and streamlined navigation within web applications.

Additionally, avoid the following pitfalls while working with breadcrumbs for web applications:

  • Wrapping breadcrumbs: Avoid wrapping breadcrumbs, especially on mobile, instead consider truncating long labels and using a tooltip to display the full text on hover.

  • Location: Breadcrumbs should sit above the content but below the main navigation.

  • Keyword-rich titles: Use descriptive and short words that are easy to understand for users.

  • Clickable breadcrumbs: Every breadcrumb should be clickable. There should be no disabled breadcrumbs.

Best Practices with Material-UI Breadcrumbs

Before incorporating breadcrumbs into a design, it is crucial to understand their purpose and limitations. Breadcrumbs, inspired by Hansel and Gretel’s trail, serve to aid users in navigating back to the home page. However, they shouldn’t replace primary navigation, and not all websites require breadcrumbs. Consider the overall navigation patterns of your users before deciding to implement breadcrumbs.

Some of the best practices include:

  1. Hierarchy Display: Breadcrumbs should reflect hierarchy, not session history, to avoid confusion and visual clutter. Only essential levels with ancestor pages should be displayed. Consider shortening the breadcrumb trail on mobile devices to maintain clarity, showing only the last one or two levels.

  2. Clickable Links: Ensure that each link in the breadcrumb trail is easily clickable by providing sufficient spacing. Crowded trails can confuse users, so maintaining a touch target area of at least 1cm x 1cm on mobile devices is recommended.

  3. Dividers for Direction: Breadcrumb dividers should mimic movement. For left-to-right languages, arrows should point to the right, indicating progress. Conversely, for right-to-left languages, the current page appears on the left edge. This ensures intuitive navigation.

  4. Tooltip for Truncated Labels: If labels are truncated due to length, provide tooltips on hover to display the full name. Alternatively, shorten labels where possible to prevent truncation. On mobile, consider shortening the breadcrumb trail to the last few levels for better accessibility.

Best Practices Part II

  1. Style Moderation: Breadcrumbs serve as secondary navigation and should not overshadow primary navigation or main content. Avoid flashy, distracting colors, ensuring compliance with color contrast requirements for accessibility.

  2. Left-Align for Readability: Left-align breadcrumbs for readability, following the natural reading direction from left to right. For right-to-left languages, align breadcrumbs to the right. Consistency with the overall layout pattern is essential.

  3. Home Page Indication: The first breadcrumb should indicate the home page, allowing users an easy way back. If the global navigation already includes a homepage link, consider omitting it in the breadcrumb trail to avoid redundancy.

  4. Complement, Don’t Replace Navigation: Breadcrumbs should complement primary navigation rather than replace or complicate it. Avoid overwhelming users with too many navigation systems; if other indicators help users identify their location, such as a header menu, leave breadcrumbs as a supportive feature.

  5. Include Only Site Pages: Breadcrumb trails should only include pages users can visit. Avoid including logical category groupings like “Get started” from the global navigation menu to prevent confusion and dead-end pages.

What You Have Learned

Breadcrumbs are a supplementary form of navigation that helps users reach pages within the structure of an interface. They can be particularly useful in aiding navigation within multi-layered, hierarchical sites.

In this article, you have learned about how breadcrumbs improve the overall UX of your web pages, you learned about the Material-UI Breadcrumbs component, its props to control different features of the component, you learned how to easily create static, dynamic, and programmatic breadcrumbs based on the current route of your page. You also learned about the best practices while working with breadcrumbs and some of the pitfalls to avoid.

Skip the hard part of writing codes from scratch by letting our AI agent generate your components for your web application and be 5x effective and productive.

Further Readings

If you enjoyed reading this article, consider checking out other great pieces from our blog.

Check out this YouTube video for even more clarity on the Material-UI Breadcrumbs component ⬇

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.