Image for post
Image for post

Build This Cool Dropdown Menu with React, React Router and CSS

How about a sweet dropdown menu to throw in a tight area of your site? Or maybe use it as a simple navigation tool for your minimalistic layout? Or switch to this smaller menu when the screen shrinks to smaller size.

Image for post
Image for post

b

Tutorial

Table of Contents

  • Preliminary Junk
  • Menu Component
  • Menu CSS
  • React Router
  • Conclusion

Preliminary Junk

To get this going, I made a create-react-app, installed , deleted any unneeded default code, and set up a file structure that looks like this:

Image for post
Image for post

Menu Component

Menu.js contains all the JavaScript and JSX for our dropdown.

There are essentially four parts:

  1. A useState hook holding a boolean that dictates if the menu should open. I call this openMenu.
  2. A function called setClassNames() which conditionally adds classes to the menu items. The CSS of the classes will animate the menu.
  3. A function called pushToRoute() which employs React Router to render a new component after a menu item is clicked.
  4. The Menu component’s return JSX for rendering the structure and bringing together all the functionality.
Image for post
Image for post
Image for post
Image for post

Menu CSS

The CSS does all the work opening the menu. There are five important parts.

The .Menu class is the most outer container. It’s important to give it a property of position: relative;.

The individual menu items will have a position: absolute;, so they will render based on the nearest component with a position. I want the basis of position to be the outer div of our Menu component.

2.

The .m-item class is applied to each individual menu item. They are absolutely positioned with an initial top: 0;. This will render all the items on top of each other at the top of the .Menu div.

I use em units for width and all the properties so I can ensure the items will fit perfectly on top of each other and still be responsive (em units are relative to the font-size of the element).

For aesthetics, I give them a background-color, box-shadow, padding, border-radius, font-size, and color.

The flexbox properties vertically and horizontally center the text in each div. The cursor property lets the user know the menu items are clickable. Finally, transition will animate changing properties applied by the setClassNames() function and CSS :hover.

Image for post
Image for post

3.

.m-item:hover adds a small border to the menu items on hover. The added 1 px of border causes the items to move slightly on hover giving them a little bit of life.

4.

.m-logo is a special class added to the first menu item. The z-index: 1; brings that div to the top so all other divs will hide underneath it.

z-index has a default of 0 so if only one item has it, 1 will be enough to bring it to the top of everything.

5.

A series of classes called .open-1, .open-2, and .open-3 cause the animation of the drop down. These classes are applied via setClassNames() once the the top menu item is clicked.

Once clicked, each item will transition to the new properties in their open-# class. Namely, they will drop to the specified top and new background-color.

Image for post
Image for post

React Router

All the aesthetic aspects of the Menu component are set up at this point. All that’s left is to set up the React Router so that clicking on the items navigates you to the correct component.

Let’s wire this up in the following three steps:

The App.js file is the main run file for the whole project so this is where I set up the basic Router stuff.

I wrap App's return with BrowserRouter so the soon-to-be Routes will be available to all components contained.

I set up a Switch so that when one Route is rendered, the others will be disabled. Then, I define each specific Route needed for the project (obviously , these are made up for the sake of demonstration).

The Menu component is placed outside the Switch so it will render whenever App is rendering. This makes it an efficient navigation tool, available on any screen of the app.

Image for post
Image for post

2.

In our Menu component, I import withRouter and wrap the Menu with it in the export statement.

Image for post
Image for post
Image for post
Image for post

withRouter gives Menu props that will allow us to manipulate the react-router-dom so we have to give our Menu a parameter of props.

Image for post
Image for post

3.

Finally, I set up the function pushToRoute() which takes a parameter string of a route and pushes our app to that route. Then, it closes the Menu by calling setOpenMen(false).

Image for post
Image for post

The menu items call pushToRoute() onClick and there I define the destination.

Image for post
Image for post

Conclusion

I enjoyed making this menu. It’s a very efficient and easy tool that fits in a number of scenarios. I hope you find some of the concepts useful.

I love feedback. Got any suggestions? I’d be happy to add your knowledge to my own. Hit me up in the comments or email me: jason.melton2@gmail.com.

Best! Jason Melton.

Written by

Software dev. Love root beer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store