DEV Community

Ustariz Enzo
Ustariz Enzo

Posted on • Updated on

Code a responsive navbar with React!

Hey fellow creators,

It's time to build an awesome responsive navbar with React!

If you prefer to watch the video version, it's right here :

1. Build the Navbar component.

import React from 'react'
import './Navbar.css'

export default function Navbar() {
  return (
    <nav>
      <ul className="list">
          <li className="items">Home</li>
          <li className="items">Services</li>
          <li className="items">Contact</li>
        </ul>
      <button className="btn">BTN</button>
    </nav>
  )
}
Enter fullscreen mode Exit fullscreen mode

2. Style the navbar in your CSS file.

Start by styling the navbar however you want (with your own color palette!). Make sure to center everything and to fix it to the top of the page. Here's how I did it:

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(45deg, rgb(156, 14, 156), midnightblue);
}

.list {
    list-style-type: none;
    background: linear-gradient(45deg, rgb(156, 14, 156), midnightblue);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.items {
    margin-right: 20px;
    font-size: 20px;
    text-transform: uppercase;
    color: #f1f1f1;
    cursor: pointer;
}

.btn {
    display: none;
    position: absolute;
    right: 10px;
    top: 7px;
    padding: 5px;
    color: #000;
    font-size: 18px;
}
Enter fullscreen mode Exit fullscreen mode

Now, the important thing is to make it responsive (for mobile screens), so add a media query:

@media screen and (max-width: 500px){
    .list {
        flex-direction: column;
        height: auto;
    }
    .items:nth-child(1){
        border-top: 1px solid rgba(255, 255, 255, 0.555);
        margin-top: 50px;
    }
    .items {
        width: 100%;
        border-top: 1px solid rgba(255, 255, 255, 0.555);
        text-align: center;
        margin-right: 0px;
        padding: 20px 0;
    }
    .btn {
        display: block;
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Use React to have a smooth toggle menu!

Now it's finally time to use React! In your Navbar.js file, add to the top of the file the hooks you'll need:

import React, {useState, useEffect} from 'react'
Enter fullscreen mode Exit fullscreen mode

Then, create the state, which will be false since we don't want to see the menu when we arrive on the website. Add a short circuit operator in your nav, before your list of links, so that if the toggle menu is true, it'll show the list, otherwise it'll hide it:

export default function Navbar() {
  const [toggleMenu, setToggleMenu] = useState(false)

  return (
    <nav>
      {(toggleMenu && (
      <ul className="list">
      <li className="items">Home</li>
      <li className="items">Services</li>
      <li className="items">Contact</li>
    </ul>
      )}

      <button className="btn">BTN</button>
    </nav>
  )
}
Enter fullscreen mode Exit fullscreen mode

You then need to create a function that will toggle the menu upon clicking on the button:

const toggleNav = () => {
    setToggleMenu(!toggleMenu)
  }
Enter fullscreen mode Exit fullscreen mode

Add said function to your button to trigger the animation:

<button onClick={toggleNav} className="btn">BTN</button>
Enter fullscreen mode Exit fullscreen mode

It works! However if you widen your screen, then it'll hide your links, which isn't something we want. To fix this, you'll need to add a const below the first one, that will detect the screen width:

const [screenWidth, setScreenWidth] = useState(window.innerWidth)
Enter fullscreen mode Exit fullscreen mode

Modify the condition returning the nav or not, like so:

return (
    <nav>
      {(toggleMenu || screenWidth > 500) && (
      <ul className="list">
      <li className="items">Home</li>
      <li className="items">Services</li>
      <li className="items">Contact</li>
    </ul>
      )}

      <button onClick={toggleNav} className="btn">BTN</button>
    </nav>
  )
}
Enter fullscreen mode Exit fullscreen mode

Now, when you widen your page, the navbar will be complete with your links at the top of the page!

4. Add an event.

However, upon shrinking the page, it'll show the menu but you can no longer toggle it. In order to fix that, you need to add an event. Use the hook useEffect, which is triggered once the component has finished mounting, which will trigger that callback function.

Create a function that'll be called every time the window is shrunk or widened, thanks to the event listener you'll need to add right after:

useEffect(() => {

    const changeWidth = () => {
      setScreenWidth(window.innerWidth);
    }

    window.addEventListener('resize', changeWidth)

  }, [])
Enter fullscreen mode Exit fullscreen mode

Now, whenever the window size changes, it's updating the state of your component, so that it'll go from the larger navbar to your toggle menu.
Wait! You're almost done, but here's one last thing you need to add to your hook:

useEffect(() => {

   ...

    return () => {
        window.removeEventListener('resize', changeWidth)
    }

  }, [])
Enter fullscreen mode Exit fullscreen mode

This is recommended: you need to use a clean-up function. That way, if your component is destroyed (for whatever reason), it'll remove the event listener from the memory.

There you go! Check out the full code here to have a complete overview of the component and its css.

Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool

Enzo.

Top comments (3)

Collapse
 
bikramjeetsingh profile image
Bikramjeet Singh

Is it possible to add an animation to this, to make it expand smoothly?

Collapse
 
nksidhu98 profile image
nksidhu98

Hi,
What is the editor you are using?

Collapse
 
fullstackscout profile image
Gary

Looks like simple Vs-code.