How to Build Responsive Navigation Bar in React Js

In this extensive tutorial, you will understand how to simply build a responsive navigation bar in React js app with the help of the latest version of react-router-dom, react-icons, and styled-components libraries.

In UI, a navigation bar allows site visitors to choose topics, categories, links, or sub-topics of their choice. With the help of a navigation bar, visitors do not require to enter the URL for a particular webpage.

Instead, the navigation process occurs using the navigation bar, using the significant links of the web app.

We will create a simple react app that holds the Navbar component, which allows users to traverse in web app based on the links we create. We will not just create the simple navbar rather; we will go for a responsive navigation bar in react.

React Responsive Navbar Component Example

  • Step 1: Download React Project
  • Step 2: Install Required Packages
  • Step 3: Define Navbar Routes
  • Step 4: Make React Pages
  • Step 4: Create Navbar Routes
  • Step 5: View App on Browser

Download React Project

Before we start developing navbar feature, we need to make sure the Create React App tool is configured in our system.

Here is the command that need to be invoked to install the tool:

npm install create-react-app --global

You can execute the given command to install the react app:

npx create-react-app react-vlog

Get into the app directory using given command:

cd react-vlog

Install Required Packages

Setting up a navigation bar in react needs certain modules, such as styled-components, react-icons, and react-router-dom.

You can copy together with the following commands and run them at the same time from your terminal.

npm install react-router-dom

npm install --save styled-components

npm install react-icons

Define Navbar Routes

Styled components allow us to design the elements for the navigation bar, thats what exactly we are going to accomplish in this step.

In the src/ folder, make the components/ folder, then create the Navbar/ folder next, and make the index.js file.

Add the provided code within the file.

import { FaBars } from 'react-icons/fa'
import styled from 'styled-components'
import { NavLink as Link } from 'react-router-dom'

export const PrimaryNav = styled.nav`
  z-index: 14;
  height: 90px;
  display: flex;
  background: #8bc34a;
  justify-content: space-between;
  padding: 0.18rem calc((100vw - 1000px) / 2);
`

export const MenuLink = styled(Link)`
  color: #fff;
  display: flex;
  cursor: pointer;
  align-items: center;
  text-decoration: none;
  padding: 0 1.2rem;
  height: 100%;
  &.active {
    color: #000000;
  }
`

export const Hamburger = styled(FaBars)`
  display: none;
  color: #ffffff;
  @media screen and (max-width: 768px) {
    display: block;
    font-size: 1.9rem;
    top: 0;
    right: 0;
    position: absolute;
    cursor: pointer;
    transform: translate(-100%, 75%);
  }
`

export const Menu = styled.div`
  display: flex;
  align-items: center;
  margin-right: -25px;
  @media screen and (max-width: 768px) {
    display: none;
  }
`

In the previous step, we created elements for the navigation bar, such as MainNav, NavLink, Nav, and ResIcon.

We need to use those elements to form the responsive navigation bar, create an components/Navbar/index.js file and paste the provided code into this file.

import React from 'react'
import { MainNav, NavLink, Nav, ResIcon } from './NavElement'

const Navbar = () => {
  return (
    <>
      <MainNav>
        <ResIcon />
        <Nav>
          <NavLink to="/home" activeStyle>
            Home
          </NavLink>
          <NavLink to="/product" activeStyle>
            Product
          </NavLink>
          <NavLink to="/details" activeStyle>
            Details
          </NavLink>
          <NavLink to="/contact" activeStyle>
            Contact
          </NavLink>
        </Nav>
      </MainNav>
    </>
  )
}

export default Navbar

Make React Pages

We need some pages, using those pages we can navigate in our react app.

Create the pages/ folder, in this folder make the file named Home.js and place the provided code within the file.

import React from 'react'

function Home() {
  return (
    <div>Home</div>
  )
}

export default Home

Second page that you have to create is the pages/Product.js, after creating the page place the following code into the file:

import React from 'react'

function Product() {
  return (
    <div>Product</div>
  )
}

export default Product

Third page that you have to make is the pages/Details.js, here is the code that will give you the basic
structure to your page:

import React from 'react'

function Details() {
  return (
    <div>Details</div>
  )
}

export default Details

Fourth page that you need to create is the pages/Contact.js, you have to insert the following code into the file:

import React from 'react'

function Contact() {
  return (
    <div>Contact</div>
  )
}

export default Contact

Create Navbar Routes

In this step, we will be heading towards the src/App.js file. In this file, define the routes using the react-router dom version 6 library.

import React from 'react'
import './App.css'
import Navbar from './components/Navbar'
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import Product from './pages/Product'
import Details from './pages/Details'
import Contact from './pages/Contact'

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/product" element={<Product />} />
        <Route path="/details" element={<Details />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </>
  )
}

export default App

Open the src/index.js file and wrap the App component using the BrowserRouter api.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

View App on Browser

Execute the suggested command and start the react applicaiton:

npm start

You can now open the app using the provided url:

http://localhost:3000

How to Build Responsive Navigation Bar in React Js

Summary

So this was it; we have completed this profound guide. In this guide, we comprehended the entire process of creating a simple responsive navigation bar component in React using the npm libraries.