React MUI Bottom Navigation

React Material UI is an open-source library for the React User Interface components that implement Google’s Material Design. It provides a wide range collection of prebuilt, reusable, responsive components which requires less coding and are ready to use for production implementation. It includes beautifully designed components that can be easily customized according to the user’s needs and requirements.

Bottom Navigation is a way to showcase primary and frequently visited pages or destinations in an application. The developer can display three to five frequently visited pages or destinations at the bottom of the screen using the Bottom Navigation component provided by Material UI. Each navigation can be represented using an icon and an optional text. When the user will click on any bottom screen navigation, the user is taken to the associated destination page to that icon.

Syntax:

<BottomNavigation>
    <BottomNavigationAction label="" icon={ } /> 
</BottomNavigation>

Important props:

children: It is used to provide the content to the component.
classes: It is used to override the styles of the component.
component: It is used to set the root node. It can be a string HTML or a component.
onChange: It is used to handle the event when the user clicks on any of the bottom navigation options.
showLables: It is used to allow BottomNavigationAction components to show text labels for the navigation options.
value: It is used to hold the currently selected Bottom Navigation option.

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. “onChange” function on the BottomNavigation prop is responsible to handle the change event, and for the navigation option or destination page, we have used “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:

Example 2: In this example, We have implemented the same functionality using the CustomBottomNavigation component. In this example, we are passing the “BottomNavigationAction” components as a child element to our Custom Navigation component.

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 TwitterIcon from '@mui/icons-material/Twitter'; 

import InstagramIcon from '@mui/icons-material/Instagram'; 

import FacebookIcon from '@mui/icons-material/Facebook'; 

import TimelineIcon from '@mui/icons-material/Timeline'; 

const App = () => { 

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

    const CustomBottomNavigation = (props) => { 

        return (<BottomNavigation 

            showLabels 

            value={value} 

            onChange={(event, newValue) => { 

                setValue(newValue); 

            }} 

        > 

            {props.children} 

        </BottomNavigation> 

        ); 

    } 

    return ( 

        <div style={{ textAlign: "center", marginTop: "50px" }}> 

            <h1>Geeks for Geeks</h1> 

            <h3>Bottom Navigation Component</h3> 

            <CustomBottomNavigation > 

                <BottomNavigationAction label="Twitter" 

                    icon={<TwitterIcon />} /> 

                <BottomNavigationAction label="Instagram" 

                    icon={<InstagramIcon />} /> 

                <BottomNavigationAction label="Facebook" 

                    icon={<FacebookIcon />} /> 

                <BottomNavigationAction label="Timeline" 

                    icon={<TimelineIcon />} /> 

            </CustomBottomNavigation> 

        </div> 

    ); 
}; 

export default App;