Simple responsive navigation bar with Tailwind CSS in React
A responsive navigation bar is an important aspect of any website or web application. It helps users to navigate easily and find the information they are looking for. With the help of Tailwind CSS, a utility-first CSS framework, creating a responsive navigation bar in React is easier than ever.
To create a simple responsive navigation bar, we first need to install Tailwind CSS and add it to our React project. Then, we can create a basic HTML structure for the navigation bar, including a menu icon that will be displayed on smaller screens. Next, we can use Tailwind CSS classes to style the navigation bar and make it responsive, with different layouts and styles depending on the screen size. Finally, we can add functionality to the menu icon using JavaScript or React, to toggle the display of the navigation menu on smaller screens. With these steps, we can create a clean and efficient responsive navigation bar using Tailwind CSS in React.
Demo Application
Simple responsive navigation bar with Tailwind CSS in React
- Project structure and Package dependencies
- Setup Tailwind CSS
- Implementation for mobile screen
- Implementation for desktop screen
- Output
1. Project structure and Package dependencies
- responsive-navigation-tailwind-react-app
- node_modules
- public
- index.html
- src
- App.js
- index.css
- index.js
- Menu.js
- package-lock.json
- package.json
- README.md
You will find the version of the following packages in React application.
2. Setup Tailwind CSS
We need to set up Tailwind CSS in our React project. Kindly refer to the following article for the steps on how to set up Tailwind CSS.
Getting started with Tailwind CSS in React
3. Implementation for mobile screen
We will use the mobile-first approach and create a design for mobile screens. Please refer to the following files for the mobile screen design.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import React from 'react'; const Menu = () => { return <div className="px-2 py-3 space-y-2 font-medium text-slate-700"> <a href="#" className="block px-3 py-2 rounded-md text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700" > Home </a> <a href="#" className="block px-3 py-2 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" > Features </a> <a href="#" className="block px-3 py-2 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" > Pricing </a> <a href="#" className="block px-3 py-2 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" > Contact </a> </div> } export default Menu; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | import React, { useState } from 'react'; import Menu from './Menu'; function App() { const [showMobileMenu, setShowMobileMenu] = useState(false); return ( <nav className="bg-gray-400"> <div className="flex items-center justify-between h-16 px-4 border-b border-solid border-slate-600"> <div className="flex-shrink-0 font-bold tracking-wider"> LOGO </div> <button type="button" className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out" onClick={() => setShowMobileMenu(!showMobileMenu)}> <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24" > <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" ></path> </svg> </button> </div> {showMobileMenu && <Menu />} </nav> ); } export default App; |
You will get the following layout for the mobile screen.
4. Implementation for desktop screen
Now let’s add few more classes to design desktop view.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import React from 'react'; const Menu = () => { return <div className="px-2 md:px-0 py-3 space-y-2 md:space-y-0 md:space-x-2 font-medium text-slate-700"> <a href="#" className="block md:inline-block px-3 py-2 rounded-md text-white bg-gray-900 focus:outline-none focus:text-white focus:bg-gray-700" > Home </a> <a href="#" className="block md:inline-block px-3 py-2 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" > Features </a> <a href="#" className="block md:inline-block px-3 py-2 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" > Pricing </a> <a href="#" className="block md:inline-block px-3 py-2 rounded-md hover:text-white hover:bg-gray-700 focus:outline-none focus:text-white focus:bg-gray-700" > Contact </a> </div> } export default Menu; |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | import React, { useState } from 'react'; import Menu from './Menu'; function App() { const [showMobileMenu, setShowMobileMenu] = useState(false); return ( <nav className="bg-gray-400"> <div className="max-w-7xl mx-auto flex items-center justify-between h-16 px-4 border-b border-solid border-slate-600"> <div className="flex-shrink-0 font-bold tracking-wider"> LOGO </div> <div className="hidden md:block"> <Menu /> </div> <button type="button" className="md:hidden bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:bg-gray-700 focus:text-white transition duration-150 ease-in-out" onClick={() => setShowMobileMenu(!showMobileMenu)}> <svg className="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h16" ></path> </svg> </button> </div> <div className="md:hidden"> {showMobileMenu && <Menu />} </div> </nav> ); } export default App; |
You will get the following layout for the desktop screen.
5. Output
Run your application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
