This is my way to create Hamburger Menu using React.js and TailwindCSS CSS framework. Check this out!
Setup
- Create a
React.jsproject setup with the following syntax.
$ npx create-react-app my-app
# or
$ yarn create-react-app my-app
- Setup the TailwindCSS. Read more about the steps
- Then open the project we just created into your favorite
code editor. - Next, install a package namely
react-router-dom, here's the syntax. More about react-router-dom
$ npm install react-router-dom@6
#or
$ yarn add react-router-dom@6
- Then go to the
srcfolder, and createcomponentfolder, and then create theNavbars.jsfile.
Imports
- Next we will start by importing everything we need.
import React, { useState } from "react";
import { Link } from "react-router-dom";
Using useState to Open and Close Navigation
- Now that we have content, we need a way to show it. We can use
useStatefor this case. Before the return statement, add the following:
const [isMenuOpen, setIsMenuOpen] = useState(false);
Settings the Desktop Content and Mobile Content
- Next, we create the Navbars component. Follow the below code.
<div className="py-8">
<div className="bg-blue-800 fixed left-0 right-0 top-0 z-50 shadow-lg">
<div className="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
<div className="relative flex items-center justify-between">
<Link to="/" className="inline-flex items-center">
<span className="ml-2 text-xl font-medium text-white">Naufal Akbar</span>
</Link>
<ul className="flex items-center hidden space-x-8 lg:flex">
<li>
<Link to="/" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Home
</Link>
</li>
<li>
<Link to="/about" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
About
</Link>
</li>
<li>
<Link to="/skill" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Skills
</Link>
</li>
<li>
<Link to="/project" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Project
</Link>
</li>
<li>
<Link to="/blog" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Blog
</Link>
</li>
<li>
<Link to="/contact" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Contact
</Link>
</li>
</ul>
<div className="lg:hidden">
<button aria-label="Open Menu" title="Open Menu" className="p-2 -mr-1 transition duration-200 roundedfocus:outline-none focus:shadow-outline" onClick={() => setIsMenuOpen(true)}>
<svg className="w-5 text-gray-600" viewBox="0 0 24 24">
<path fill="#ffffff" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
<path fill="#ffffff" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z" />
<path fill="#ffffff" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z" />
</svg>
</button>
{isMenuOpen && (
<div className="absolute top-0 left-0 w-full z-10">
<div className="p-5 bg-gray-900 border rounded shadow-sm">
<div className="flex items-center justify-between mb-4">
<div>
<Link to="/" aria-label="Company" title="Company" className="inline-flex items-center">
<span className="ml-2 text-xl font-bold tracking-wide text-white">Naufal Akbar</span>
</Link>
</div>
<div>
<button
aria-label="Close Menu"
title="Close Menu"
className="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200focus:outline-none focus:shadow-outline"
onClick={() => setIsMenuOpen(false)}
>
<svg className="w-5 text-gray-600" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
/>
</svg>
</button>
</div>
</div>
<nav>
<ul className="space-y-4">
<li>
<Link to="/" className="font-medium tracking-wide text-gray-400 transition-colors duration-200hover:text-primary-focus">
Home
</Link>
</li>
<li>
<Link to="/about" className="font-medium tracking-wide text-gray-400 transition-colors duration-200hover:text-primary-focus">
About
</Link>
</li>
<li>
<Link to="/skill" className="font-medium tracking-wide text-gray-400 transition-colors duration-200hover:text-primary-focus">
Skills
</Link>
</li>
<li>
<Link to="/project" className="font-medium tracking-wide text-gray-400 transition-colors duration-200hover:text-primary-focus">
Project
</Link>
</li>
<li>
<Link to="/blog" className="font-medium tracking-wide text-gray-400 transition-colors duration-200hover:text-primary-focus">
Blog
</Link>
</li>
<li>
<Link to="/contact" className="font-medium tracking-wide text-gray-400 transition-colors duration-200hover:text-primary-focus">
Contact
</Link>
</li>
</ul>
</nav>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</div>
The Complete Code
Here's the complete code.
import React, { useState } from "react";
import { Link } from "react-router-dom";
function Navbars() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
<div className="py-8">
<div className="bg-blue-800 fixed left-0 right-0 top-0 z-50 shadow-lg">
<div className="px-4 py-5 mx-auto sm:max-w-xl md:max-w-full lg:max-w-screen-xl md:px-24 lg:px-8">
<div className="relative flex items-center justify-between">
<Link to="/" className="inline-flex items-center">
<span className="ml-2 text-xl font-medium text-white">Naufal Akbar</span>
</Link>
<ul className="flex items-center hidden space-x-8 lg:flex">
<li>
<Link to="/" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Home
</Link>
</li>
<li>
<Link to="/about" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
About
</Link>
</li>
<li>
<Link to="/skill" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Skills
</Link>
</li>
<li>
<Link to="/project" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Project
</Link>
</li>
<li>
<Link to="/blog" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Blog
</Link>
</li>
<li>
<Link to="/contact" className="tracking-wide text-gray-100 transition-colors duration-200 hover:text-gray-300">
Contact
</Link>
</li>
</ul>
<div className="lg:hidden">
<button aria-label="Open Menu" title="Open Menu" className="p-2 -mr-1 transition duration-200 rounded focus:outline-none focus:shadow-outline" onClick={() => setIsMenuOpen(true)}>
<svg className="w-5 text-gray-600" viewBox="0 0 24 24">
<path fill="#ffffff" d="M23,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
<path fill="#ffffff" d="M23,6H1C0.4,6,0,5.6,0,5s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,6,23,6z" />
<path fill="#ffffff" d="M23,20H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h22c0.6,0,1,0.4,1,1S23.6,20,23,20z" />
</svg>
</button>
{isMenuOpen && (
<div className="absolute top-0 left-0 w-full z-10">
<div className="p-5 bg-gray-900 border rounded shadow-sm">
<div className="flex items-center justify-between mb-4">
<div>
<Link to="/" aria-label="Company" title="Company" className="inline-flex items-center">
<span className="ml-2 text-xl font-bold tracking-wide text-white">Naufal Akbar</span>
</Link>
</div>
<div>
<button
aria-label="Close Menu"
title="Close Menu"
className="p-2 -mt-2 -mr-2 transition duration-200 rounded hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
onClick={() => setIsMenuOpen(false)}
>
<svg className="w-5 text-gray-600" viewBox="0 0 24 24">
<path
fill="currentColor"
d="M19.7,4.3c-0.4-0.4-1-0.4-1.4,0L12,10.6L5.7,4.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l6.3,6.3l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C4.5,19.9,4.7,20,5,20s0.5-0.1,0.7-0.3l6.3-6.3l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L13.4,12l6.3-6.3C20.1,5.3,20.1,4.7,19.7,4.3z"
/>
</svg>
</button>
</div>
</div>
<nav>
<ul className="space-y-4">
<li>
<Link to="/" className="font-medium tracking-wide text-gray-400 transition-colors duration-200 hover:text-primary-focus">
Home
</Link>
</li>
<li>
<Link to="/about" className="font-medium tracking-wide text-gray-400 transition-colors duration-200 hover:text-primary-focus">
About
</Link>
</li>
<li>
<Link to="/skill" className="font-medium tracking-wide text-gray-400 transition-colors duration-200 hover:text-primary-focus">
Skills
</Link>
</li>
<li>
<Link to="/project" className="font-medium tracking-wide text-gray-400 transition-colors duration-200 hover:text-primary-focus">
Project
</Link>
</li>
<li>
<Link to="/blog" className="font-medium tracking-wide text-gray-400 transition-colors duration-200 hover:text-primary-focus">
Blog
</Link>
</li>
<li>
<Link to="/contact" className="font-medium tracking-wide text-gray-400 transition-colors duration-200 hover:text-primary-focus">
Contact
</Link>
</li>
</ul>
</nav>
</div>
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
}
export default Navbars;