A React Navbar Component by Dan on CodePen

A simple, responsive #Navbar using #ReactJS:  #Coding

  • 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 tags to wrap around everything else that will go in there:

    And underneath all that I’m going to render the component inside the tags in my index.html:

    Ok, so we have a basic component that renders an empty nav.

  • This will give my a “hamburger” icon (courtesy of Font Awesome) for smaller screens that need a drop down menu.
  • Since our drop-down menu is contained in the “narrowLinks” className, we’re going to target that in our function:

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

    And to make the new function work, we need to give our and tags inside “navNarrow” an onClick:

    That just about wraps it up.

  • 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:

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

    So by setting our icon to float: left, that’s taken care of.

  • 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:

    For a working example, click here.

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 tags. But it is responsive, so that’s fun.

@danielbuda: A simple, responsive #Navbar using #ReactJS: #Coding

tags. But it is responsive, so that’s fun.

tag inside the body:

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

tags to wrap around everything else that will go in there:

tags in my index.html:

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

tags (with dummy links).

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:

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

tags inside “navNarrow” an onClick:

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:

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

‘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:

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

A React Navbar Component by Dan on CodePen