React MUI BottomNavigation API

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI BottomNavigation API. The Bottom Navigation component allows the users to move between primary destinations in an application. 

Import BottomNavigation API:

import BottomNavigation from '@mui/material/BottomNavigation';
// or
import { BottomNavigation } from '@mui/material';

Props list:

• children: It is used to denote the content of the card.
• classes: It is to override or extend the styles applied to the component.
• component: The component used to render the root element.
• onChange: A callback function that is triggered when the active tab changes.
• showLabels: A boolean value that controls whether the labels for the tabs are displayed.
• sx: It is used to add custom CSS styles to the card.

CSS Rules:

• root (MuiBottomNavigation-root):  It is the style applied to the root element.

Creating React Project:

Step 1: To create a react app, 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:

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

npm start

Example 1: Below example demonstrates the React MUI BottomNavigation API. In the example, the BottomNavigation component will show its labels using the showLables prop.

Javascript

import { Add, Home, Info } from "@mui/icons-material";
import {
    BottomNavigation, BottomNavigationAction,
} from "@mui/material";
import React, { useState } from "react";

function App() {

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

    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
                <h2>React MUI BottomNavigation API</h2>
            </div>
            <div style={{ width: "50%" }}>
                <BottomNavigation
                    showLabels
                    value={value}
                    onChange={(event, newValue) => {
                        setValue(newValue);
                    }}
                    sx={{ backgroundColor: '#FCFBFA' }}
                >
                    <BottomNavigationAction label="Home"
                        icon={<Home />} />
                    <BottomNavigationAction label="Create"
                        icon={<Add />} />
                    <BottomNavigationAction label="About"
                        icon={<Info />} />
                </BottomNavigation>
            </div>
        </center>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI BottomNavigation API. In the example, the BottomNavigation component will not show its labels.

Javascript

import { Add, Home, Info } from "@mui/icons-material";
import {
    BottomNavigation, BottomNavigationAction,
} from "@mui/material";
import React, { useState } from "react";

function App() {

    const [value, setValue] = useState(0);
    return (
        <center>
            <div>
                <h1 style={{ color: "green" }}>
                    GeeksforGeeks
                </h1>
                <h2>React MUI BottomNavigation API</h2>
            </div>
            <div style={{ width: "50%" }}>
                <BottomNavigation
                    value={value}
                    onChange={(event, newValue) => {
                        setValue(newValue);
                    }}
                    sx={{ backgroundColor: '#FCFBFA' }}
                >
                    <BottomNavigationAction label="Home"
                        icon={<Home />} />
                    <BottomNavigationAction label="Create"
                        icon={<Add />} />
                    <BottomNavigationAction label="About"
                        icon={<Info />} />
                </BottomNavigation>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/api/bottom-navigation/