React MUI Navigation Components

React Material-UI (MUI) is a popular library that provides a set of reusable components for building user interfaces in React applications. These components are based on Material Design, a design system developed by Google that provides guidelines for creating visually appealing, user-friendly interfaces.

Navigation components refer to a type of component that is used to create navigation interfaces for an application.

MUI provides various types of Navigation Components:

Components	Descriptions
Bottom Navigation	This component allows you to create a bottom navigation bar, with options for text labels, icons, and multiple active states.
Breadcrumbs	This component refers to a navigation component that displays a list of links to pages or sections, usually in a hierarchical structure, to indicate the current page’s position within the website or application.
Drawer	This component provides a way to create a side navigation panel in your application, with options for content, navigation, and actions.
Link	This component is used to create clickable links that can be used to navigate to different pages or sections within your application.
Menu	This component is used to create a pop-up menu of options that can be used to perform actions within your application.
Pagination	This component is used to display a set of pages and provide a way for the user to navigate between them.
Speed dial	This component is used to create a floating action button that opens a set of related actions when it is clicked.
Stepper	This component allows you to create a step-by-step process, with options for linear or non-linear progression, text labels, and icons.
Tabs	This component allows you to create a tabbed navigation interface, with options for horizontal or vertical orientation, text labels, and icons.

Setting up React.js application:

Step 1: Create a React.js application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e foldername, move into that directory using the following command:

cd foldername

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

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

npm install @mui/icons-material

Project Structure: The project structure will look like this:

Example 1: In this example, we are using the BottomNavigation component. We have imported the icons from Material UI to represent the text and icon both as a Navigation option. The “onChange” function on the BottomNavigation prop is responsible to handle the change event, and for the navigation option or destination page, we have used the “BottomNavigationAction” with “label” and “icon” props. 

App.js: Write down the below code in the App.js file, where App is our default component provided by React in which code is being written.

Javascript

import React, { useState, useEffect } from "react";
import BottomNavigation from
    "@mui/material/BottomNavigation";
import BottomNavigationAction from
    "@mui/material/BottomNavigationAction";
import AttachEmailOutlinedIcon from
    '@mui/icons-material/AttachEmailOutlined';
import CloudDownloadOutlinedIcon from
    '@mui/icons-material/CloudDownloadOutlined';
import BookmarksOutlinedIcon from
    '@mui/icons-material/BookmarksOutlined';
import DeleteOutlineOutlinedIcon from '
    @mui/icons-material/DeleteOutlineOutlined';

const App = () => {
    const [value, setValue] = React.useState(0);

    return (
        <div style = {{
            textAlign: "center",
            marginTop: "50px"
        }}>
            <h1>Geeks for Geeks</h1>
            <h3>Bottom Navigation Component</h3>
            <BottomNavigation
                showLabels
                value={value}
                onChange={(event, newValue) => {
                    setValue(newValue);
                }}
            >
                <BottomNavigationAction label="Email"
                    icon={<AttachEmailOutlinedIcon />} />
                <BottomNavigationAction label="Download"
                    icon={<CloudDownloadOutlinedIcon />} />
                <BottomNavigationAction label="Bookmarked"
                    icon={<BookmarksOutlinedIcon />} />
                <BottomNavigationAction label="Deleted"
                    icon={<DeleteOutlineOutlinedIcon />} />
            </BottomNavigation>
        </div>
    );
};

export default App;

Step to run the program: To run the application execute the below command from the root directory of the project:

npm start

Output: Your web application will be live on “http://localhost:3000”.Now, you will see the following output: