How to create a navbar using Material-UI in React

Key takeaways:
Material UI is an open-source library for React components based on Google’s Material Design.
We can use Material UI components to build a functional and visually appealing navigation bar.
We can use AppBar for a responsive React navigation bar and ToolBar for horizontal alignment of items.
Add icons and text using Typography on the navbar, customizing with props like variant and sx.
We can also implement a settings option with Avatar, IconButton, and Menu, controlling visibility with the state.

Material UI allows us to create a well-designed navigation bar that should be seamlessly integrated into the user experience so that users are not distracted while navigating. As Jared Spool said:

“Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it.”

Prerequisites

We need a React application with Material UI to create a navigation bar.

Note: To get a better experience while viewing the navigation bar in the code widgets presented below, please click the link followed using Your app can be found at link:.

Add the `AppBar` component

Please click the “Run” button to view a simple and nonfunctional AppBar component.

Code explanation

Lines 2–3: We import AppBar and ToolBar components from @mui/material/AppBar and @mui/material/ToolBar, respectively.

Note: ToolBar is used to create a horizontal bar layout to align items such as buttons, text, and icons.
AppBar is used to create responsive navbar at the top of the page.

Line 8: We create the AppBar component with the position propIt is argument/value/attribute that the component takes. The position prop helps us define how our React navigation bar should behave on scrolling.
Line 9: We create the ToolBar component that helps us align the navigation bar’s contents in a horizontal layout. In the coming sections, we will define all functionalities and components in the ToolBar.

Add the logo and text in the `AppBar`

Please click the “Run” button to view the logo and text added in the AppBar component.

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import StoreIcon from '@mui/icons-material/Store';
import Typography from '@mui/material/Typography';

function App() {

    return (
      <AppBar position="static">
        <Toolbar>
          <StoreIcon></StoreIcon>
            <Typography
              variant="h5"
              noWrap
              component="a"
              href="/"
              sx={{
                mr: 2,
                fontWeight: 200,
                fontFamily:'roboto',
                color:'white',
                letterSpacing: '.2rem',
                textDecoration: 'none',
              }}
            >
              Educative
            </Typography>
        </Toolbar>
      </AppBar>
    );
  }
export default App;

Adding logo and text in the AppBar component

Code explanation

Line 4: We import StoreIcon from @mui/icons-material/Store.

Note: Material UI provides us with a collection of icons that we can get from this link.

Line 5: We import Typography from @mui/material/Typography.
Line 12: We create the StoreIcon component, which will display a store icon.
Lines 13–26: We create the Typography component to display text. We use the following props in it:
- variant: Defines the type of text to be displayed. The options are h1, h2, h3, h4, h5, etc.
- noWrap: Defines that the text should not span to the next line.
- component: Defines that the component should be displayed as an anchor or link.
- sx: Defines the styles to be applied to the text.
Line 27: We write Educative as the text to be displayed. We can customize the text according to our use case.

Add pages in `AppBar`

Primarily, we use a navigation bar to create a link between pages. In this section, we will add pages to our navigation bar. To view the pages added, please click the “Run” button below.

import React from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import StoreIcon from '@mui/icons-material/Store';
import Typography from '@mui/material/Typography';
import { Box, Button } from '@mui/material';


function App() {

    const my_pages = [ 'Solutions' , 'Products', 'Pricing'];
    return (
      <AppBar position="static">
        <Toolbar>
          <StoreIcon></StoreIcon>
            <Typography
              variant="h5"
              noWrap
              component="a"
              href="/"
              sx={{
                mr: 2,
                fontWeight: 200,
                fontFamily:'roboto',
                color:'white',
                letterSpacing: '.2rem',
                textDecoration: 'none',
              }}
            >
              Educative
            </Typography>
            <Box sx={{ flexGrow: 1 , display: 'flex'}}>
              {my_pages.map((page) => (
                <Button
                  key={my_pages}
                  sx={{ my: 3, color: 'white', display: 'block' }}
                >
                  {page}
                </Button>
              ))}
            </Box>
        </Toolbar>
      </AppBar>
    );
  }
export default App;

Adding pages to the navigation bar

Code explanation

Line 6: We import the Box and Button components from @mui/material.
Line 11: We create an array, my_pages, which contains the name of pages to include in the navigation bar.
Lines 32–41: We create a Box component containing a loop that iterates through the my_pages array and renders a Button component for each array item.

Add settings in `AppBar`

We come across websites with settings options in the top-right corner of the page. In this section, we will see how we can add settings to our AppBar component. To view the settings option, please click the “Run” button below.

import React, { useState } from 'react';
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import StoreIcon from '@mui/icons-material/Store';
import Typography from '@mui/material/Typography';
import { Box, Button } from '@mui/material';
import Avatar from '@mui/material/Avatar';
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import MenuItem from '@mui/material/MenuItem';
import Menu from '@mui/material/Menu';


function App() {
    const my_pages = [ 'Solutions' , 'Products', 'Pricing'];
    const my_settings = ['Profile', 'Account','Logout'];

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

    const handleOpenSettingsMenu = (event) => {
      setAnchorElUser(event.currentTarget);
    };

    const handleCloseSettingsMenu = () => {
      setAnchorElUser(null);
    };


    return (
      <AppBar position="static">
        <Toolbar>
          <StoreIcon></StoreIcon>
            <Typography
              variant="h5"
              noWrap
              component="a"
              href="/"
              sx={{
                mr: 2,
                fontWeight: 200,
                fontFamily:'roboto',
                color:'white',
                letterSpacing: '.2rem',
                textDecoration: 'none',
              }}
            >
              Educative
            </Typography>
            <Box sx={{flexWrap:'wrap',flexGrow: 1, display:'flex' }}>
              {my_pages.map((page) => (
                <Button
                  key={my_pages}
                  sx={{ my: 2, color: 'white', display: 'block' }}
                >
                  {page}
                </Button>
              ))}
            </Box>
            <Box sx={{ flexGrow: 0 }}>
              <Tooltip title="Open my_settings">
                <IconButton onClick={handleOpenSettingsMenu} sx={{ p: 0 }}>
                  <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
                </IconButton>
              </Tooltip>
              <Menu
                sx={{ mt: '55px' }}
                id="menu-appbar"
                anchorEl={anchorElUser}
                anchorOrigin={{
                  vertical: 'top',
                  horizontal: 'right',
                }}
                open={Boolean(anchorElUser)}
                onClose={handleCloseSettingsMenu}
              >
                {my_settings.map((setting) => (
                  <MenuItem key={setting} onClick={handleCloseSettingsMenu}>
                    <Typography textAlign="center">{setting}</Typography>
                  </MenuItem>
                ))}
              </Menu>
            </Box>
        </Toolbar>
      </AppBar>
    );
}
export default App

Adding settings to the navigation bar

Code explanation

Lines 7–11: We import the required components to create the settings option.
Line 16: We create the settings array, my_settings, which contains the setting items we want to add to our settings option.
Line 18: We create a useState variable, anchorElUser, that stores the state of the menu.
Lines 20–26: We define the handleOpenSettingsMenu and the handleCloseSettinsMenu that controls whether the setting items should be displayed on the screen.
Lines 59–82: We create the Box component that contains the Avatar component to be displayed on the screen. We define the onClick function inside the IconButton that executes the handlOpenSettingsMenu function and toggles settings on the screen. The Menu component contains a loop that iterates through the my_settings array and renders the MenuItem components.

Conclusion

In this way, we can create a navigation bar in our React application by leveraging the AppBar component provided by Material UI.

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is AppBar in React?

AppBar is a component provided by Material UI that creates a responsive navigation bar at the top of a React application.

Does Material UI use CSS?

Yes, Material UI uses CSS for styling its components.

How do create a Navbar using CSS?

With CSS, boring HTML menus can be transformed into good-looking navigation bars. We can create a navbar using different CSS properties. Here is the detailed Answer on How to create a Navbar using CSS.

How do we create a navbar using Tailwind CSS in React?

Tailwind CSS—a popular utility-first CSS framework that makes creating stylish and responsive user interfaces easy. To create create a navbar using Tailwind CSS in React, visit our Answer on How to create a navbar using Tailwind CSS in React.

How do we create a navigation bar using React-Bootstrap?

React-Bootstrap is one of the oldest React libraries, making it a suitable choice as our UI foundation. To create a React-Bootstrap navigation bar in a React application, check out our Answer on How to create a navigation bar using React-Bootstrap.

Free Resources

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments

How to create a navbar using Material-UI in React

Prerequisites

Add the AppBar component

Code explanation

Add the logo and text in the AppBar

Code explanation

Add pages in AppBar

Code explanation

Add settings in AppBar

Code explanation

Conclusion

Frequently asked questions

What is AppBar in React?

Does Material UI use CSS?

How do create a Navbar using CSS?

How do we create a navbar using Tailwind CSS in React?

How do we create a navigation bar using React-Bootstrap?

Add the `AppBar` component

Add the logo and text in the `AppBar`

Add pages in `AppBar`

Add settings in `AppBar`