How to create a Beautiful Responsive navbar Using Tailwind CSS
Tags: css, tailwindcss, programming, webdev
Published: 2021-10-10 01:23:41

---
title: How to create a Beautiful Responsive navbar Using Tailwind CSS
published: true
date: 2021-01-10 01:16:04 UTC
tags: [css, tailwindcss, programming, webdev]
canonical_url: https://www.devwares.com/blog//how-to-create-a-beautiful-responsive-navbar-using-tailwind-css
cover_image: https://www.devwares.com/blog/images/responsive-navbar-css.png
---

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](https://www.devwares.com/blog/images/responsive-navbar-css2.png) 

## 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:**

```html
<!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:**

```html
 <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:**

```html
<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.

![Tailwind CSS NavBar](https://www.devwares.com/blog/images/responsive-navbar-css3.png)
 

## 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:**

```html
<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:**

```html
<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:**

```html
<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:**

```javascript
  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:**

```javascript
 btn.addEventListener("click", () => {
            menu.classList.toggle("hidden");
        })
```

The over JavaScript code will look like the code below

**Code:**

```html
 <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:**

```html
<!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.

![Tailwind CSS NavBar](https://www.devwares.com/blog/images/responsive-navbar-css4.png)
 
and for the mobile screen

![Tailwind CSS NavBar](https://www.devwares.com/blog/images/responsive-navbar-css5.png)
 
###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.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## Resources 

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)