Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

How to Create a Navigation Bar with Material-UI ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

Material UI is a front-end UI framework for React components designed by Google. It is built using Less which is a backward-compatible language extension for CSS. We have used AppBar component to create a Navigation Bar with Material-UI in ReactJS.

Creating React Application And Installing Module:

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

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command.

cd foldername

Step 3: After creating the React.js application, install the material-UI modules using the following command.

npm install @material-ui/core
npm install @material-ui/icons

Project Structure: It will look like the following.

Example: Create a Navbar.js file where we will create our own Navbar component using material UI as shown below.




// Importing files from Material-UI
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
// Using Inline Styling
const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    menuButton: {
        marginRight: theme.spacing(2),
// Exporting Default Navbar to the App.js File
export default function Navbar() {
    const classes = useStyles();
    return (
        <div className={classes.root}>
            <AppBar position="static">
                <Toolbar variant="dense">
                    <IconButton edge="start"
                        color="inherit" aria-label="menu">
                        <MenuIcon />
                    <Typography variant="h6" color="inherit">
                        Geeks for Geeks

After creating the Navbar component, we will import it into our App.js file as shown below.



// Importing the navbar component inside
// the main app file
import Navbar from "./components/Navbar";
const App = () => {
    return (
            <Navbar />
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Navbar Demo


My Personal Notes arrow_drop_up
Last Updated : 02 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials