Creating an Adaptive Navigation Menu for React

Why you can’t ignore an adaptive nav menu in 2021 (and beyond)

An adaptive navigation menu is a must for any modern website. In 2020 68.1% of all website visits came from mobile devices (source) so it stands to reason that you should not ignore the mobile UI/UX.

Required and optional imports

Before we actually begin coding our navigation menu let’s install the dependencies we’ll use:

npm install react-router --save

That will allow us to use Link, so that every time you click a menu item it’ll redirect you to different components without reloading the page; and if you’d like to have a burger menu icon:

npm install react-icons — save

React-icons opens up a huge library of icons you can use on your react project, go to react-icons and play around with their search feature, there’s an icon for anything you can imagine.

For our nav bar we’ll use two specific icons, which should be imported on your Nav.js component

import { FaBars, FaTimes } from 'react-icons/fa'

FaBars is your regular 3-bar icon, you’ve seen them before, they open up the menu so you can click on a link, and FaTimes is a stylized ‘X’ so you can close said menu

import { IconContext } from 'react-icons/lib'

IconContext allows you to style your icons and match them the design of your page. Wrap the entire component return statement with:

<IconContext.Provider value={{ color: '#000' }}>                            </IconContext.Provider>

The value is the color the icons will be but you can also do that in your css file.

import React, { useState } from 'react'

We’ll use the useState hook to as an alternative to state, but feel free to use whichever you prefer.

import '../styles/Nav.css'

And lastly import your css file, mine is in the styles folder so make sure to import the proper location.

With that in place your empty component should look something like this:

Coding the links

With that in place we’ll add the links, a way to handle clicking on each menu item, and we’ll use the ternary operator to open and close the menu

const [click, setClick] = useState(false)
const handleClick = () => {
    setClick(!click)
}
const closeMobileMenu = () => {
    setClick(false)
}

Your finished component should look similar to this:

The links are inside an unsorted list, as that makes it easier to target the classes for the opening (showing) and closing (hiding of the menu) in the css we’ll soon see

'nav-menu active'
'nav-menu'
'nav-item'

Replace the number of links and the link content to your needs, in my case that’s the nav bar for a salon template I’m currently building

CSS ties it all together

These css rules can be adjusted to your liking, play around, and see what works best.

The most important part is:

@media screen and (max-width: 960px) {
}

That media query will automatically switch between a regular menu and a mobile menu based on screen size.

Conclusion

Your mobile menu should be fully operational and it should adapt to smart phones. Open up the console on Chrome (or your browser of choice) and click the Toggle Device Toolbar on the top left, it will allow you to test different screen sizes; you can also manually resize the browser window and see the transition in real time.