Almost every website out there has a navigation bar. The navigation bar is built to help users navigate around a webpage easily. It is important to have your navigation bar easily available for user in order to increase user experience.
Table of content
- Introduction
- Prerequisites
- Add Tailwind CSS to project
- HTML Code
- Adding the website logo
- Adding the primary menu items
- Add the mobile button
- Adding the mobile menu
- Adding functionality
- overview
- Conclusion
Introduction
Tailwind CSS is a CSS framework that uses a first utility class to style webpages and applications. We can add these styles directly into Our HTML file, making it easier to style element to our specific needs.
in our Tailwind CSS tutorial today we are going to look at how to build Tailwind CSS Navbar.
The Tailwind CSS navbar we are going to build will look like the image below
Prerequisites
To follow along with the tailwind CSS tutorial, you need to have the following
- Install The latest version of Tailwind CSS
- Basic HTML knowledge
- Basic CSS knowledge
- Basic JavaScript knowledge
Add Tailwind CSS to project
You must first install Tailwind CSS before we can add them to our Tailwind CSS navbar project. There are several ways to install Tailwind CSS but the most recommended one is to use the package manager method. You can check our article on how to install tailwind to your project here.
However, you will need to add the tailwind CSS you have installed into our project and you can do by using the “link” tag to link the tailwind CSS file to the HTML template.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
HTML Code
In our HTML code, we added some containment div to help us build our Tailwind CSS nav bar better. We first created a Nav tag. On the nav tag we added white background and a shadow class to the tailwind CSS nav bar project.
Next, we created three “divs”. The first div is the containment div which is where all our navigation bar items will be placed. We added some classes to our “div” tag.
Code:
<nav class="bg-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
</div>
</div>
</div>
</nav>
Adding the website logo
We used a basic image logo and modified its height and width to fit the navigation bar using Tailwind CSS classes. The code for adding the website logo is below
Code:
<div class="flex space-x-7">
<!--Website Logo-->
<a href="#" class="flex items-center py-4 px-2">
<img src="images/devwares-logo.png" alt="Logo" class="h-8 w-8 mr-2">
<span class="font-semibold text-gray-500 text-lg">
Navigation
</span>
</a>
</div>
Our Tailwind CSS nav will look like the image below.
Adding the primary menu items
At this stage, we will add the necessary menu items to help users navigate around the website. Below is the code for the menu
Code:
<div class="hidden md:flex items-center space-x-1">
<a href="" class="py-4 px-2 text-gray-500 border-b-4 border-purple-500 font-semibold">Home</a>
<a href=""
class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
Services
</a>
<a href=""
class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
About
</a>
<a href=""
class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
Contact Us
</a>
</div>
</div>
</div>
</nav>
</body>
We added some classes to the menu to help it fit into our navigation bar.
Add the mobile button
Next, we are going to create the menu for small screens. Then We can go ahead to use JavaScript to toggle the menu we created.
Code:
<div class="md:hidden flex items-center">
<button class="outline-none menu-button">
<svg class="w-6 h-6 text-gray-500" x-show="! showMenu" fill="none" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" viewBox="0 00 24 24" stroke="currentColor">
<path d="m4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
In the code above, we used SVG to create a hamburger for the small screen and gave it a height and weight of 6. We also changed the color to gray. Other classes we included are
Flex is used to set the hamburger menu along with the items in the Tailwind CSS navbar.
- Outline-none removes outline borders on the button when clicked
- Md:hidden class is used to hide the mobile menu button when viewed on a large screen.
Adding the mobile menu
We can now add the mobile menu for our Tailwind CSS navbar.
Code:
<div class="hidden mobile-menu">
<ul class="">
<li class="active"> <a href="nav.html"
class="block text-sm px-2 py-4 text-white bg-purple-500 font-semibold">Home</li>
<li><a href="#services"
class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
Services
</a>
</li>
<li><a href="#About"
class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
About
</a>
</li>
<li><a href="#Contact Us"
class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
Contact Us
</a></li>
</ul>
</div>
In the above code, we created some menu using the ul and li tags. We also went ahead to style them with some Tailwind CSS classes. which include
- Block class which aligns the menu items in a vertical position
- Hidden class, which is used to hide the menu in a large screen but only shows when in mobile size.
Adding functionality
Moreover, we will need to add functionality to our responsive Tailwind CSS nav bar to make it responsive on all devices. The JavaScript code will be written using the <script> tag.
We can go ahead and grab the HTML tag we use to apply this functionality.
Code:
const btn = document.querySelector('button.menu-button');
const menu = document.querySelector(".mobile-menu");
Once this is done the next step is to create a function that has an event listener. This will add the toggle functionality to the mobile menu button when it is clicked on.
Code:
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
})
The over JavaScript code will look like the code below
Code:
<script>
const btn = document.querySelector('button.menu-button');
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
})
</script>
Overview
The overall code will be like the code below
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="bg-white shadow-lg">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<!--Website Logo-->
<a href="#" class="flex items-center py-4 px-2">
<img src="images/devwares-logo.png" alt="Logo" class="h-8 w-8 mr-2">
<span class="font-semibold text-gray-500 text-lg">
Navigation
</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-1">
<a href="" class="py-4 px-2 text-gray-500 border-b-4 border-purple-500 font-semibold">Home</a>
<a href=""
class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
Services
</a>
<a href=""
class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
About
</a>
<a href=""
class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
Contact Us
</a>
</div>
<div class="md:hidden flex items-center">
<button class="outline-none menu-button">
<svg class="w-6 h-6 text-gray-500" x-show="! showMenu" fill="none" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" viewBox="0 00 24 24" stroke="currentColor">
<path d="m4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
<div class="hidden mobile-menu">
<ul class="">
<li class="active"> <a href="nav.html"
class="block text-sm px-2 py-4 text-white bg-purple-500 font-semibold">Home</li>
<li><a href="#services"
class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
Services
</a>
</li>
<li><a href="#About"
class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
About
</a>
</li>
<li><a href="#Contact Us"
class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
Contact Us
</a></li>
</ul>
</div>
</div>
</div>
</nav>
<script>
const btn = document.querySelector('button.menu-button');
const menu = document.querySelector(".mobile-menu");
btn.addEventListener("click", () => {
menu.classList.toggle("hidden");
})
</script>
</body>
</html>
Our final project will look like the images below.
and for the mobile screen
Conclusion
In this Tailwind CSS tutorial, we learned how to create a Tailwind CSS navbar on all screens, and we looked at some of the classes used in these projects. We hope you enjoyed this tutorial.
Design and code Tailwind CSS websites 3x faster
We created a tool to visually build tailwind CSS components, prototypes, websites, and web apps. Ship projects faster using an intuitive tailwind builder and editor.Try Windframe out for free.
Resources
Tailwind grid-How to use tailwind CSS grid templates in your project
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind form-How to create and style a Responsive Form using Tailwind CSS
How to use tailwind CSS padding, margin and border in your project
How to create a beautiful React Bootstrap select with icons.
How to create a Beautiful Responsive Navigation bar Using Tailwind CSS
Tailwind Modal-How to create a React Modal using Tailwind CSS.
How to Implement a React Step Progress Bar Using Tailwind CSS
Top comments (0)