I use React a lot, and I use navbars a lot, so this was just an obvious one for me. This is nothing extravagant. I'm not using React Router in this example, just some <a> tags. But it is responsive, so that's fun.

First things first, I need to set my entry point for my navbar in my index.html file. I'll just insert a <navbar> tag inside the body:

  <navbar></navbar>

And I'm of course going to remember to first import React and ReactDOM at the top of my .js file:

  import React from 'react';
import ReactDOM from 'react-dom';

Now I need to create my basic React component. I'm going to give it a name of NavComponent because that just makes way too much sense, and inside the render function, toss in an empty (for now) set of <nav> tags to wrap around everything else that will go in there:

    const NavComponent = React.createClass({
    render: function() {
      return (
        <nav>

        </nav>
      );
    }
  });

And underneath all that I'm going to render the component inside the <navbar> tags in my index.html:

  ReactDOM.render(<NavComponent />, document.querySelector('navbar'));

Ok, so we have a basic component that renders an empty nav. Let's fill it in!

I'm going to create 2 sections inside my nav component, one for larger screens (className="navWide") and one for smaller (className="navNarrow"). And inside each I'm adding 3 sets of <a> tags (with dummy links).

  <nav>
  <div className="navWide">
      <div className="wideDiv">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
    </div>
    <div className="navNarrow">
      <i className="fa fa-bars fa-2x"></i>
        <div className="narrowLinks">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
        </div>
  </div>
</nav>

You'll notice I also have an <i> tag just inside my "navNarrow" class div. This will give my a "hamburger" icon (courtesy of Font Awesome) for smaller screens that need a drop down menu.

The last thing we need to do with our .js file is make the drop down menu work. So we'll need to create a function (burgerToggle) that makes the menu drop down and go away depending on what's clicked. Since our drop-down menu is contained in the "narrowLinks" className, we're going to target that in our function:

  burgerToggle: function() {
  let linksEl = document.querySelector('.narrowLinks');
}

And then tell our function to toggle the drop-down based on its current CSS display value:

  burgerToggle: function() {
  let linksEl = document.querySelector('.narrowLinks');
  if (linksEl.style.display === 'block') {
            linksEl.style.display = 'none';
        } else {
            linksEl.style.display = 'block';
        }
}

And to make the new function work, we need to give our <i> and <a> tags inside "navNarrow" an onClick:

  <a href="#" onClick={this.burgerToggle}>Link 1</a>

That just about wraps it up. And while there's always styling to add, I do want to point out the important stuff.

I obviously don't want to see both sets of links all the time, and since we're using mobile-first design, we're going to set our "navWide" links to hidden:

  .navWide {
  display: none;
}

And we're also going to stick our hamburger icon and drop-down links on the left side of the screen, just for funsies:

  .navNarrow {

        i {
            float: left;
        }

        .narrowLinks {
            display: none;

            a {
                display: block;
                float: left;
                clear: left;
            }
        }
    }

So by setting our icon to float: left, that's taken care of. We've also set our "narrowLink" display to none so they're hidden until our burgerToggle function kicks in. And we also styled the <a>'s so that they'll show up in the drop-down menu on the left and stacked on top of each other.

And finally a media query to switch between our mobile drop-down menu and our larger screen mode with just a row of our links:

  @media (min-width: 480px) {

    nav {

        .navWide {
            display: block;
        }

        .navNarrow {
            display: none;
        }
    }
}

For a working example, click here. And for a non-React version of the same thing, check this out.


18,738 1 18