Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Creating a Collapsible Navigation Menu in React.js

Today we're going to be making a collapsible Navigation menu solution using nothing but React.js. I set out to create one of these for myself on one of the projects I am working on, and as always I wanted the navigation for this site to be mobile friendly. Creating a menu that would collapse at certain screen sizes seemed like the best solution, so I dug in and quickly realized that I couldn't find too many examples. Overall, it ended up being a great learning experience and in retrospect was fairly straight forward.

We'll be sticking mostly to the React portion here, but there was some SCSS work that I did to make the navigation pretty to look at, but I'll leave you to do most of that.

Getting Set Up

Really the only true dependency that we need here is React itself, but I am going to recommend (and use) react-icons to give us access to navigation icon, as well as react-router to get your router connected. So install those dependencies:

$ npm install react-router react-icons --save

Next let's get these imported into a new file that we've named navigation.js inside the components directory of our app.

import React, { Component } from 'react';  
import { Link } from 'react-router';  
import MobileNav from 'react-icons/lib/io/navicon-round';  

Get your navigation component created, then we're ready to get to the fun parts. Everything we'll be making below will go inside this component and above the render() function.

export default class NavContainer extends Component {

  //our other functions, and state will go here soon

  render() {
//navigation will go here
} }

Set our initial state and get window width

Let's look ahead a bit and see what we're going to need for this to work;

  1. We're going to need an if-then statement to see if it's time to render the Mobile Navigation menu or the desktop one.

  2. We'll need a way to tell if the mobile navigation is open or not.

So let's get our component's state declared with these:

  constructor(props) {
    this.state = {
      windowWidth: window.innerWidth,
      mobileNavVisible: false

After we've set the initial window width and told the component that the mobile navigation isn't visible right now, let's allow our state to update itself if the user changes the screen size.

  handleResize() {
    this.setState({windowWidth: window.innerWidth});

  componentDidMount() {
    window.addEventListener('resize', this.handleResize.bind(this));

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize.bind(this));

These three functions will set up an event listener once the component has mounted, and then it handles it to update our state with the new window width if it changes. This is going to allow us to test if it's time to draw the mobile navigation or the full one.

Full navigation menu

Next let's create a function that will return only the navigation menu. Creating a single function that handles the links to our menu will make changing them a breeze, and keeps us from repeating ourselves, since both the full and mobile menus will feature the same links.

  navigationLinks() {
    return [
  • BLOG
]; }

Mobile navigation menu

Make another function that asks if the mobile menu is visible or not, and display these links based on the answer, then create a click handler for when the mobile menu button is clicked (or touched):

  renderMobileNav() {
    if(this.state.mobileNavVisible) {
      return this.navigationLinks();

  handleNavClick() {
    if(!this.state.mobileNavVisible) {
      this.setState({mobileNavVisible: true});
    } else {
      this.setState({mobileNavVisible: false});

Tying the collapsible menu together

Lastly, we're going to put it all together with this function that will render either the mobile navigation or the full one:

  renderNavigation() {

]; } else { return [
]; } }

We're simply running an if then statement that checks if it exceeds the width that we've defined, and returning either a div containing the mobile navigation (with the icon that will pass click events to our handler, or the full navigation.

Notice that each of these menus are nested inside a div with a name. Thanks to SCSS we can style the same ul of items with two completely different looks to fit the needs of our mobile and desktop navigation.

You'll now only to need to call this function inside the render() function of our component and you're done!

  render() {

In summary we've created a component that we can pull into our application that is ready for any screen size. On large screens we'll see the full menu displayed across the top as is traditional, but on smaller screens it will dynamically compress into a mobile menu that with a single tap will reveal itself. With some SCSS styling you'll have a beautiful, fast, and fully react navigation bar!

Thanks for reading, and sharing, and please leave any questions or comments you may have below. Until next time, happy coding!

This post first appeared on David Meents, please read the originial post: here

Share the post

Creating a Collapsible Navigation Menu in React.js


Subscribe to David Meents

Get updates delivered right to your inbox!

Thank you for your subscription