Make your Navbar responsive with React, Tailwind Css and react-router-dom to link our page

In this article will be creating a responsible Navbar. hamburger menu and also React-router-dom to link our page. in our web page using React and tailwind Css. hamburger menu is a button on the side of our web page the user clicks to open up the menu.

Let’s begin

we need to open our terminal and install the following packages

> Npx create-react-app <folder-name>
> cd my-project

Next, we are going to Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

>  npm install -D tailwindcss postcss autoprefixer
>  npx tailwindcss init

yarn
> yarn add -D tailwindcss postcss autoprefixer
> yarn tailwindcss init

Add the paths to all your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

also add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

index.css file

@tailwind base;
@tailwind components;
@tailwind utilities;

React-router-dom so we can be able to link our page in the website

npm install react-router-dom
or
yarn add react-router-dom

Now we are going to install react-icons so will be able to get the hamburger and close button.

npm install react-icons
or
yarn add react-icons

We are now done installing the packages. open your code editor and remove the following files

App.test.js

reportWebVitals.js

go to App.js file, remove the logo and all the tags inside the returned jsx. and put in a div tag with h1 tag code lets begin and start your app with

npm start

function App() {
  return (
    <div>
      <h1 className="font-bold text-3xl text-center">Let's Begin</h1>
    </div>
  );
}

export default App;

your browser is going to look like this

let create 6 files Header.js About.js Home.js NavLinks.js DestopMenu.js MobileMenu.js

Now go to Header.js file and create a function that returns h1 tag, this is the Header page

**const Header = () => {
    return(
        <div className="text-center">
                <h1 className="text-3xl">Logo</h1>
        </div>
    )

}
export default Header;**

go to App.js import About.js Home.js component that will created earlier. import routes, router and route from react-router-dom and link both pages. go to each page, import the header component

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home"
import About from './About';

function App() {
  return (
    <div>
      <Router>
        <Routes>
          <Route path="/" element={<Home/>} />
          <Route path="/about" element={<About />} />
          <Route path="/about" element={<Contact />} />
        </Routes>
      </Router> 
    </div>
  );
}

export default App;

// Home component 

import Header from "./Header"

const Home = () => {
    return(
        <div>
            <Header/>
            <h1 className="text-2xl">This is  the Home page</h1>
        </div>
    )
}
export default Home;

// About component 

import Header from "./Header"

const About = () => {
    return(
        <div>
            <Header/>
            <h1 className="text-2xl">This is  the Home page</h1>
        </div>
    )
}
export default About;

in creating our Navbar menu we are going to first start with our mobile screen size first.

Go to NavLinks.js component and create a link About.js Home.js to their path and style it using tailwind Css

import { Link } from 'react-router-dom';

const NavLinks = () => {
  return (
    <div>
        <ul className='sm:flex absolute top-28 left-0 sm:relative sm:top-0 sm:right-0 text-2xl text-center bg-red-500 w-screen p-5 hover:text-b' >
              <Link to='/'>
                <li className='mx-5 hover:text-white'>Home</li>
              </Link>
              <Link to='/about'>
                <li className='mx-5 hover:text-white'>About</li>
              </Link>
          </ul>
    </div>
  );
};

export default NavLinks;

import NavLinks.js component into your MobileMenu.js. and go to https://react-icons/ and search for hamburger icon, copy and import it into your MobileMenu.js. we are to useState hooks to set our state. so anytime the user click hamburger icon it will display the Nav links and also add our logo with some css style. useState enables you to add state to function components. Calling React.useState inside a function component generates a single piece of state associated with that component.

Whereas the state in a class is always an object, with Hooks, the state can be any type. Each piece of state holds a single value, which can be an object, an array, a boolean, or any other type you can. for more understanding visit https://reactjs.org/docs/hooks-reference.html#usestate

make sure you set it hidden from large screen as show in the image below.

import React, { useState } from 'react';
import NavLinks from './NavLinks';
import { GiHamburgerMenu } from 'react-icons/gi';
import { AiOutlineClose } from "react-icons/ai"

const MobileMenu = () => {
  const [open, setOpen] = useState(false)

  return (
      <div className='sm:hidden cursor-pointer '>
          <GiHamburgerMenu style={{fontSize:40}} onClick={() => setOpen(!open)}/>
          {open && <NavLinks/>}
      </div>
  );
};

export default MobileMenu;

we are almost done with mobile part of the page, there one remaining. the close icon. so whenever the user click the icon. it will hide the NavLinks. and display the hamburger icon using ternary operator. for knowledge about Ternary operator visit https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator. search for close icon from https://react-icons/ and import it into MobileMenu.js component.

import React, { useState } from 'react';
import NavLinks from './NavLinks';
import { GiHamburgerMenu } from 'react-icons/gi';
import { AiOutlineClose } from "react-icons/ai"

const MobileMenu = () => {
  const [open, setOpen] = useState(false)

  const hambugerButton = <GiHamburgerMenu style={{fontSize:40}} onClick={() => setOpen(!open)}/>

  const closeButton = <AiOutlineClose style={{fontSize:40}} onClick={() => setOpen(!open)}/>

  return (
      <div className='sm:hidden cursor-pointer '>
          {open? closeButton : hambugerButton}
          {open && <NavLinks/>}
      </div>
  );
};

export default MobileMenu;

this is how it will look like.

image

Now let import the NavLinks.js component. into our DestopMenu.js component and set it hidden from mobile screen size

import NavLinks from './NavLinks';

const Menu = () => {
  return (
      <div className='hidden sm:flex absolute left-80'>
          <NavLinks/>
      </div>
  );
};

export default Menu;

This is how it will look like

this is the end of creating a responsive navbar with React and tailwind css. follow me if you like content like this. i will be creating more of it.

you can also follow me on twitter @hey_Jonuel