ūü•≥
WindFrame is here: Design, prototype and code
sale icon End of Summer Sale ūüéĀ Get Contrast PRO UI library + admin template with 5 admin dahsboards, 23 pages and 10000+ components at 60% off ūüéČ
postImage

How to create a Beautiful Responsive Navigation bar Using Tailwind CSS

blogImage

By Emmanuel Chinonso

Technical Writer

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

Tailwind CSS NavBar

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

To use the Tailwind CSS navbar in your project, you have to install Tailwind CSS. 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 in the head part ofyour HTML code to link the Tailwind CSS file to the HTML template.

Code:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Navigation</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13</body>
14</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 div elements. The first div is the container div which is where all our navigation bar items will be placed. We added some classes to our div tag.

Code:

1 <nav class="bg-white shadow-lg">
2        <div class="max-w-6xl mx-auto px-4">
3            <div class="flex justify-between">
4                <div class="flex space-x-7">
5 </div>
6 </div>
7 </div>
8</nav>

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:

1<div class="flex space-x-7">
2                    <!--Website Logo-->
3
4    <a href="#" class="flex items-center py-4 px-2">
5         <img src="images/devwares-logo.png" alt="Logo" class="h-8 w-8 mr-2">
6          <span class="font-semibold text-gray-500 text-lg">
7             Navigation
8           </span>
9    </a>
10</div>

Our Tailwind CSS nav will look like the image below.

Tailwind CSS NavBar

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:

1<div class="hidden md:flex items-center space-x-1">
2   <a href="" 
3 class="py-4 px-2 text-gray-500 border-b-4 border-purple-500 font-semibold">
4 Home
5 </a>
6  <a href=""
7    class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
8 Services
9 </a>
10   <a href=""
11      class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
12 About
13 </a>
14    <a href=""
15      class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
16 Contact Us
17 </a>
18  </div>
19  </div>
20   </div>
21    </nav>
22</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:

1<div class="md:hidden flex items-center">
2     <button class="outline-none menu-button">
3         <svg class="w-6 h-6 text-gray-500" 
4 x-show="! showMenu" 
5 fill="none" 
6 stroke-linecap="round"
7          stroke-linejoin="round" 
8 stroke-width="2" 
9 viewBox="0 00 24 24" 
10 stroke="currentColor">
11             <path d="m4 6h16M4 12h16M4 18h16"></path>
12         </svg>
13     </button>
14 </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:

1<div class="hidden mobile-menu">
2    <ul class="">
3        <li class="active"> 
4 <a href="nav.html"
5          class="block text-sm px-2 py-4 text-white bg-purple-500 font-semibold">Home</li>
6        <li>
7 <a href="#services"
8           class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
9 Services
10 </a>
11        </li>
12        <li>
13 <a href="#About"
14           class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
15 About
16 </a>
17        </li>
18        <li>
19 <a href="#Contact Us"
20          class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
21 Contact Us
22 </a>
23 </li>
24    </ul>
25</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:

1  const btn = document.querySelector('button.menu-button');
2        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:

1 btn.addEventListener("click", () => {
2            menu.classList.toggle("hidden");
3        })

The over JavaScript code will look like the code below

Code:

1 <script>
2        const btn = document.querySelector('button.menu-button');
3        const menu = document.querySelector(".mobile-menu");
4        btn.addEventListener("click", () => {
5            menu.classList.toggle("hidden");
6        })
7    </script>

Overview

The overall code will be like the code below

Code:

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Navigation</title>
9    <link rel="stylesheet" href="style.css">
10</head>
11
12<body>
13
14<nav class="bg-white shadow-lg">
15       <div class="max-w-6xl mx-auto px-4">
16           <div class="flex justify-between">
17               <div class="flex space-x-7">
18                   <!--Website Logo-->
19
20                   <a href="#" class="flex items-center py-4 px-2">
21<img src="images/devwares-logo.png" alt="Logo" class="h-8 w-8 mr-2">
22                       <span class="font-semibold text-gray-500 text-lg">
23                           Navigation
24                       </span>
25                   </a>
26               </div>
27               <div class="hidden md:flex items-center space-x-1">
28                <a href="" 
29class="py-4 px-2 text-gray-500 border-b-4 border-purple-500 font-semibold">
30 Home
31</a>
32               <a href=""
33               class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
34 Services
35</a>
36               <a href=""
37               class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
38 About
39 </a>
40               <a href=""
41               class="py-4 px-2 text-gray-500 font-semibold hover:text-purple-500 transition duration-300">
42 Contact Us
43</a>
44                </div>
45
46  <div class="md:hidden flex items-center">
47    <button class="outline-none menu-button">
48                <svg class="w-6 h-6 text-gray-500" x-show="! showMenu" fill="none" stroke-linecap="round"
49                    stroke-linejoin="round" stroke-width="2" viewBox="0 00 24 24" stroke="currentColor">
50                    <path d="m4 6h16M4 12h16M4 18h16"></path>
51                </svg>
52            </button>
53        </div>
54
55        <div class="hidden mobile-menu">
56            <ul class="">
57                <li class="active"> 
58 <a href="nav.html"
59                   class="block text-sm px-2 py-4 text-white bg-purple-500 font-semibold">
60 Home
61 </li>
62                <li>
63 <a href="#services"
64                   class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
65 Services
66 </a>
67                </li>
68                <li>
69 <a href="#About"
70                 class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
71 About
72 </a>
73                </li>
74                <li>
75 <a href="#Contact Us"
76                  class="block.text-sm.px-2.py-4 hover:bg-purple-500 transition duration-300">
77 Contact Us
78 </a></li>
79            </ul>
80        </div>
81    </div>
82</div>
83    </nav>
84    <script>
85        const btn = document.querySelector('button.menu-button');
86        const menu = document.querySelector(".mobile-menu");
87        btn.addEventListener("click", () => {
88            menu.classList.toggle("hidden");
89        })
90    </script>
91</body>
92
93</html>

Our final project will look like the images below.

Tailwind CSS NavBar

and for the mobile screen

Tailwind CSS NavBar

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.

Create Stunning websites and web apps

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Try contrast pro

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast

Related Posts

Comments

...