How to create Navigation Bar component in React using MUI

Create a new file and name it as NavigationBar and call it in your application as a static component.

MUI has many examples and ways in which you can render the navigation content and actions related to the current screen

Dependencies:

npm i react-router-dom

npm install @mui/material @mui/icons-material

For large screen device

For  small screen device

1.Create AppBar  Component and make it static ,so it remains static at Top of screen

    <AppBar position="static">

2.Created a Logo and added it in <Link> ,so that when clicked it will take you back to Home Page

3.Declared a Menu Item Name in a variable and called it in 

<Menu id="menu-appbar"

{.....Code }

       {pages.map((page) => (

          <MenuItem key={page.menuLinkName} onClick={handleCloseNavMenu}>

              <ReactLink to={page.menuLinkName}  style={{textDecoration:'none'}}>

<Typography textAlign="center">{page.menuName}</Typography>

</ReactLink>

          </MenuItem>

4.Used ReactLink from react-router-dom module ,for routing to other component when clicked.

5.Declared two states

 const [anchorElNav, setAnchorElNav] = React.useState(null);

    const [anchorElUser, setAnchorElUser] = React.useState(null);

where handleOpenNavMenu sets a event for Onclick event and , handleCloseNavMenu reloads it for Small screen UI.

And handleOpenUserMenu sets a event for Onclick event and , handleCloseUserMenu reloads it for Large screen UI.

Git Repo Link: https://github.com/anjutus/invoice-portal