Building Navbar with Material UI – React Js

Introduction

React is an open-source library of JavaScript used to create user interfaces of single-page applications in both web and mobile. It is a framework that has a huge developer community.

There are different libraries used to make fast and easy web development. Material-UI is a library that is used to create React web applications with ease of designing it, providing components, custom elements and more. With Material-UI the applications stays away from tons of CSS where as uses only the necessary CSS at time of use thus saves time to build and stays light weighted.

Pre-requisite

The basic need is to have general idea of React and its use of components. To get start with it first create the React environment.

Make a folder and open it up in terminal then

npx create-react-app .

Now we need to get the Material-UI to use it in our application. So in the same terminal

npm install @material/core

This will install Material-UI and all the dependencies related to it. After that all we need to do is import the required feature and implement.

Open up the environment on your preferred code editor and

npm start

Clear the files which are not required.

Navbar : Appbar

There is a component called Appbar which gives a Navbar layout in just few codes, in addition to that it has its own predefined CSS. This can be changed later on.

To use Appbar first import it from Material-UI.

import AppBar from "@material-ui/core/AppBar";

and state

<Appbar> </Appbar>

The Appbar has many attributes to set its properties. For instance if you want to make it make the Appbar fix or static, use position attribute.

  <AppBar position="fixed">

Now next is to provide the item list for our navbar. This can be given under Typography element but before that we need to state Toolbar element inside our Appbar. Toolbar generally has mixture of Button, Typography and IconButton. These all are part of Material UI only.

Import Toolbar from Material-UI

import Toolbar from "@material-ui/core/Toolbar";

Now state it between the Appbar.

<AppBar position="static">  <Toolbar>  </Toolbar></AppBar>

Now whatever you want to put inside your Navbar you can state it in between Toolbar. It is very handy to use and makes the Appbar clean.

I am going to put a list of items inside the Navbar. For that an object named navList is required to make it quick.

const navList = [

  "Master", 

  "Inventory Managemnet",

  "Customers Management",

  "Transactions",

  "Bulk Management",

  "CRM/Jobs",

  "Reports",

  "Tools",

  "Admin",

  "Help",

];

Let’s import Typography.

import Typography from "@material-ui/core/Typography";

Now with the help of map function every item from the navList will be inserted inside the navbar with having Typography element’s stylings and function.

{navList.map((obj) => (

                  <>

                    <Typography>{obj}</Typography>

                  </>

       ))}

The above code will map through each item and provide them typography and also will put them in our navbar.

Similar to Appbar, these elements too have their ways to imply attributes having different properties.

Material-UI gives is other options, to apply. Such as having input field with search icon. This is similar to other elements. Import the required element or component to be used.

import InputBase from "@material-ui/core/InputBase";

The above code will help you to apply input field.

<InputBase

                  placeholder='Search…'

                  className='searchArea'

                  inputProps={{ "aria-label": "search" }}

          />