React + Materialize SideNav in 4 steps

3 min readJan 10, 2020

In this Demo, we are going to learn how to make use of Materialize Framework inside React.

Step 1: Installation

First we create our React App using create-react-app:

npx create-react-app materialize-demo

Step 2 : Create a simple NavBar

Next, inside our project ( materialize-demo folder ), We need to install MaterializeCSS npm module.

npm install --save materialize-css@next

Then we import its css file in our App.js file. ( This step is important to make sure that our App has access to all the CSS classes of Materialize ).

// App.jsimport 'materialize-css/dist/css/materialize.min.css';

To test it, let’s create a nice NavBar with two links (Home, About):

// App.jsreturn (
 <div className=”App”>
    <nav>
      <div className=”container”>
         <ul id=”nav-mobile” class=”right hide-on-med-and-down”>
            <li><a href=”#”>Home</a></li>
            <li><a href=”#”>About</a></li>
         </ul>
      </div>
    </nav>
 </div>
 );

We should now see the Materialize NavBar appear on the Screen:

Step 3: Add a SideNav ( Slide-out menu )

Next, We want to add SideNav Component. SideNavs are slide-out menus appearing from the side of the screen upon click of the button. This type of menus is particularly well suited for Mobile Screens.
To do that we first need to create the HTML. There are two main components to create a SideNav:
1- The Menu Items of the SideNav: <ul> … </ul>
2- The trigger button to show/hide the SideNav: <a></a>

<nav>
...
<a href="#" data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons">menu</i></a>
<ul> ... </ul>
</nav>
<ul id="slide-out" class="sidenav">
 <li><a href="#item1">Item 1</a></li>
 <li><a href="#item2">Item 2</a></li>
 <li><a href="#item3">Item 3</a></li>
</ul>

Notice that:
- Our <ul> has an ID “slide-out”. This ID must match the data-target property of the trigger link.
- The trigger link is an icon. ( Need to link to CDN to show it, as is explained bellow )
- The trigger link has a “show-on-large” class. ( Need this to be able to see it on large screens ! )

We’re making use of Material icons in the Trigger Link . To do that we have to include the Google Fonts directly inside the index.html file ( inside the public/ directory ):

// public/index.html<head>
...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title> ... </title>
</head>
...

Step 4 : Initialization !

At this stage, we are able to see the trigger icon, but clicking on it doesn’t change anything. That’s where Javascript comes into play !

Inside our App.js, we need to:

Import Materialize JS Script.

// App.js
import M from  'materialize-css/dist/js/materialize.min.js';class App extends Component {
... }

Initialize the SideNav when the React Component mounts:

// App.js
import M from  'materialize-css/dist/js/materialize.min.js';class App extends Component {componentDidMount() {
  let sidenav = document.querySelector('#slide-out');
  M.Sidenav.init(sidenav, {});
}render() { ... }

Et Voilà ! Now we can show/hide our side menu by clicking on the icon

React + Materialize SideNav in 4 steps

Step 1: Installation

Step 2 : Create a simple NavBar

Step 3: Add a SideNav ( Slide-out menu )

Step 4 : Initialization !

Written by Hamza El Bouatmani