A React Navbar Component by Dan on CodePen

A simple, responsive #Navbar using #ReactJS:  @CodePen #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…
  • 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…
  • 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…
  • 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.

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.

First things first, I need to set my entry point for my navbar in my index.html file. I’ll just insert a 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:

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 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. 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 tags (with dummy links).

You’ll notice I also have an tag just inside my “navNarrow” class div. This…

A React Navbar Component by Dan on CodePen