Material UI in React #2 — Adding and customizing navbar, grid & basic routing

This is the second part of the series. In this episode you will find out how to:

• add and customize Drawer (also known as a navbar)
• add latest react-router-dom
• setup a simple routing for each Drawer item

If you prefer, there’s a video version of the tutorial:

Installing the packages

Start off with installing the packages. Just install them via your project’s terminal. If you’re using NPM just run the NPM commands if you’re using Yarn then you know what to do.

NPM react-router-dom
npm install react-router-dom@6

Yarn react-router-dom
yarn add react-router-dom@6

NPM mui icons
npm install @mui/icons-material

Yarn mui icons
yarn add @mui/icons-material

Links for the documentation can be found just below:

React Router

@mui/icons-material

Adding Drawer (navbar) component

In your ‘components’ folder create another folder and call it Navbar and create the .js file with the same name. Inside your created file just use rafce shortcut to create a functional component. I will add some random text then import Navbar file into the App.js and see if it renders correctly.

Go to https://mui.com/components/drawers/ and copy the piece of code just from underneath the full-height navigation drawer. You can expand the source code just by clicking on the chevrons icon. Copy the Drawer component only.

You should end up with something like that.

Within Navbar folder, create a const file and call it navbarItems.js. This is where we’re going to keep our menu items, we are going to specify routes, labels and icons for them. At this stage I am going to add 6 items. Each item has unique ID, an empty space for

Just remember we are trying to replicate the UI from one of free MUI templates, that can be found just here: https://mui.com/premium-themes/paperbase/ In this tutorial I will try to make it simple, so I can touch on the most important parts of this library and I am going only to use items from the first section of the left side menu.

So, back to our Navbar component. We want to map through the array of navbarItems that we’ve created.

Hey! I am aware of text.icon not being the best name for the map method and I will change it to item.icon later on. Now we are trying to render icons, but there’s nothing in our const file to represent the icon’s value so let’s just add icons to our const file. The collection of MUI icons can be found here: https://mui.com/components/material-icons/

(I am going to skip me adding icons to the const file, as it’s pretty boring, you can add any icons that you’d like as this is only a sample dashboard app).

This is how you want your navbarItems const to look like:

Once you save your code, applications navbar should look like this now:

Styles using sx props

This looks very basic and I am not going to mention the styles too much in this article (it will be covered completely in the 3rd part of the series). To get this styled up I will use sx prop where I will be passing JSS .
JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way

I’ve updated sx props in <Drawer /> and <ListItemIcon /> components.

Then just to clear it out (this part is not necessary), I have moved the styles to a separate component called styles.js (within the Navbar folder). I have assigned styles to appropriate objects:

And later it’s being passed down back to <Navbar /> component:

That looks so much cleaner. If you want to do something extra you could destructure navbarStyles.

React-router-dom

This library will help us to improve the navigation in our application. To get started just visit: https://reactrouter.com/docs/en/v6/getting-started/tutorial

We are going to use a very similar setup to the one presented in react-router’s tutorial. So just scroll down and copy that piece of code:

Paste it into your index.js file and define the routes. So we want to link the main path with our <App /> component and inside, we would like to add our nested routes with all Pages components. I’ve got my setup as follows:

You probably realised that you are missing all these pages components in your repo. It’s all good. Within /src create pages folder and in that folder add subfolders that will reflect your route names (in my example it is Authentication, MachineLearning, Hosting and etc.)

Inside of each file just create a dummy content (you can use rafce shortcut to create functional component on the go!).

We have routing installed, we defined our routes. But we need a way to navigate through these routes. Go back to the <Navbar /> component and add onClick event to <ListItem />.

Next add navigation handler, just add this line at the top of your <Navbar />
import { useNavigate } from “react-router-dom”; Then before return ( add const navigate = useNavigate(); This should look very similar to my piece:

OnClick is sorted out, now let’s define routes in navbarItems const file, so they reflect the paths from index.js. So all the route values are now updated:

We are only missing one bit to make it work. To your <App /> add Outlet component.

Outlet — A component that renders the next match in a set of matches.

This is a working piece. Save your work and quickly click through your nabar. You should notice that your URL dynamically changes on navbar item click. Navigation is all set, time to add the grid!

MUI Grid

The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

To find out more about this great addition from MUI just follow this link:
https://mui.com/components/grid/

As you’ve already seen (from previous pic) I have added <Grid container> to App.js. This is a wrapper that will hold all other <Grid items> in shape.

We are going to copy and paste the Grid import from the MUI website and replace <div> wrappers in every page’s component, I will also define the maximum space that it’s going to take (8 out of 12). Which means the rest (4/12) will be reserved for the Navbar.

Do the same for the Navbar component, but define different integer in the xs prop, it should be xs={4}

That’s it! Your simple grid system is in place.

In the third part of this article you will learn in and outs of styles in MUI. I will talk about overriding, themes and JSS.

Github link to part #2

GitHub - theatypicaldeveloper/materialUi-in-react

Remember to install dependencies with npm install once the repo is cloned.

Thank you for reading!