How to Create Simple Responsive Navigation Bar in React

Last updated on: by Digamber

In this step-by-step guide, we will share how to quite easily create a responsive navigation bar in React js application using react-router-dom, styled-components, and react icons modules.

A navigation bar allows users to navigate inside the application; on the other hand, responsive navigation adjusts its size based on the device size.

To style the responsive navigation bar, we will use the Styled-components library. It is a profound library exclusively used for styling the components in React-based applications. We will use it to add custom styling in react-navigation bar component.

React Js Build Responsive Navbar Example

  • Step 1: Install React App
  • Step 2: Install Essential Dependencies
  • Step 3: Build Navbar with Styled Components
  • Step 4: Create Pages in React
  • Step 4: Define Routes in App Js
  • Step 5: Start Development Server

Install React App

We are going to install create react app tool on our machine, however, if you have already installed make sure to jump on to the next step:

npm install create-react-app --global

To create a new react app use the suggested command from the command line tool:

npx create-react-app react-demo

Get inside the react application directory:

cd react-demo

Install Essential Dependencies

In this step, we will be installing the styled-components, react router dom and react icons libraries:

npm install --save styled-components
npm install react-icons
npm install react-router-dom

Build Navbar with Styled Components

Next, create the components/Header folder and create the NavElement.js file; in this file, we will be creating the navbar elements for the responsive navbar.

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;
  }
`

Again, in the components/Header/ folder create the index.js file and define the navigation bar items.

import React from 'react'
import { PrimaryNav, MenuLink, Menu, Hamburger } from './NavElement'
const Navbar = () => {
  return (
    <>
      <PrimaryNav>
        <Hamburger />
        <Menu>
          <MenuLink to="/home" activeStyle>
            Home
          </MenuLink>
          <MenuLink to="/about" activeStyle>
            About
          </MenuLink>
          <MenuLink to="/products" activeStyle>
            Products
          </MenuLink>
          <MenuLink to="/blog" activeStyle>
            Blog
          </MenuLink>
        </Menu>
      </PrimaryNav>
    </>
  )
}
export default Navbar

Create Pages in React

Create the pages/ folder and in this folder create the Home.js file then add the given code within the file:

import React from 'react'
function Home() {
  return <div>Home</div>
}
export default Home

Next, make the pages/ directory, in this folder create the About.js file then insert the given code inside the file:

import React from 'react'
function About() {
  return (
    <div>About</div>
  )
}
export default About

Now, Create the pages/ folder, also create the Products.js file after that add the following code within the file:

import React from 'react'
function Products() {
  return (
    <div>Products</div>
  )
}
export default Products

Finally, make the pages/ directory, make sure to create the Blog.js file and place the suggested in this file:

import React from 'react'
function Blog() {
  return (
    <div>Blog</div>
  )
}
export default Blog

Define Routes in App Js

Head over to src/ folder, look for App.js file, start importing the pages and use the react router dom routing apis to create routes in React.

import React from 'react'
import './App.css'
import Header from './components/Header'
import { Routes, Route } from 'react-router-dom'
import Home from './pages/Home'
import About from './pages/About'
import Products from './pages/Products'
import Blog from './pages/Blog'
function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/products" element={<Products />} />
        <Route path="/blog" element={<Blog />} />
      </Routes>
    </>
  )
}
export default App

Run App on Browser

For running the react app make sure to execute the following command from the terminal:

npm start

Here is the url you can use to view the nav bar on the browser:

http://localhost:3000

How to Create Simple Responsive Navigation Bar in React

Conclusion

In this post, we have learned how to create a simple yet responsive navigation bar in React js application.

To build the responsive navigation in react, we took the help of react-router-dom, styled-components, and react icons libraries.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.