React MUI Breadcrumbs Navigation

MUI or Material-UI, it’s a React component library. It enables you to build your own design system and develop React applications faster. It is basically a design language that was developed by Google in 2014. It uses more Design and Animation, grid-system, and provides shadows and lightning effects.

In React MUI Breadcrumbs Navigation, a breadcrumb includes a list of links that helps the user visualize a page’s location within the hierarchical structure of a website, and also allows navigation up to any of its “ancestors”.

Breadcrumb Types:

• Basic breadcrumb: It is the default breadcrumb. 
• Active Last breadcrumb: It keeps the last breadcrumb interactive. It shows the currently active link.
• Custom separator: The separators are used between two or more breadcrumbs. 
• Breadcrumb with icons: It consists of icons with breadcrumb descriptions. Icons help in distinguishing which component it refers to.
• Collapsed breadcrumb: It consists of a collapsible breadcrumb component.
• Customization: Custom styles are used to customize the breadcrumb. We can add custom designs to add styling to our breadcrumb.
• Integration with react-router: The breadcrumbs are also used with react-router. It helps in adding extra functionality to our app.
• Accessibility: For better accessibility make sure to add an aria-label description, set of links is structured with an ordered list element in the Breadcrumb component.
• API: The <Breadcrumbs />, <Link />, and <Typography /> APIs are used to create a breadcrumb navigation component.

Creating React Project:

Step 1: To create a react app, you need to install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure: The project structure should look like below:

Step to Run Application: Open the terminal and type the following command. 

npm start

Example 1: Below example demonstrates the React MUI active last breadcrumb navigation component with a custom separator.

Javascript

import React from "react";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Link from "@mui/material/Link";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center",
                          color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Breadcrumb Navigation</h2>
            </div>
            <div style={{ marginLeft: 40 }}>
                <div>
                    <Breadcrumbs aria-label="breadcrumb"
                                 separator="›">
                        <Link underline="hover"
                              color="inherit"
                              href="/">
                            Home
                        </Link>
                        <Link underline="hover"
                              color="inherit"
                              href="/dsa/">
                            Data Structures
                        </Link>
                        <Link
                            underline="hover"
                            color="text.primary"
                            href="/dsa/array"
                            aria-current="page"
                        >
                            Array
                        </Link>
                    </Breadcrumbs>
                </div>
                <div>
                    <Breadcrumbs aria-label="breadcrumb"
                                 separator="-">
                        <Link underline="hover"
                            color="inherit" href="/">
                            Home
                        </Link>
                        <Link underline="hover"
                            color="inherit" href="/dsa/">
                            Data Structures
                        </Link>
                        <Link
                            underline="hover"
                            color="text.primary"
                            href="/dsa/array"
                            aria-current="page"
                        >
                            Array
                        </Link>
                    </Breadcrumbs>
                </div>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI collapsible breadcrumb navigation component with icons.

Javascript

import React from "react";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Link from "@mui/material/Link";
import HomeIcon from '@mui/icons-material/Home';
import WhatshotIcon from '@mui/icons-material/Whatshot';
import DataArray from '@mui/icons-material/DataArray';

function App() {
    return (
        <div>
            <div style={{
                textAlign: "center",
                color: "green"
            }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Breadcrumb Navigation</h2>
            </div>
            <div style={{ marginLeft: 40 }}>
                <Breadcrumbs maxItems={2}
                    aria-label="breadcrumb" separator="›">
                    <Link underline="hover"
                        color="inherit" href="/">
                        <HomeIcon sx={{ mr: 0.5 }}
                            fontSize="inherit" />
                        Home
                    </Link>
                    <Link underline="hover"
                        color="inherit" href="/dsa/">
                        <WhatshotIcon sx={{ mr: 0.5 }}
                            fontSize="inherit" />
                        Data Structures
                    </Link>
                    <Link
                        underline="hover"
                        color="text.primary"
                        href="/dsa/array"
                        aria-current="page"
                    >
                        <DataArray sx={{ mr: 0.5 }}
                                   fontSize="inherit" />
                        Array
                    </Link>
                </Breadcrumbs>
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-breadcrumbs/