Tailwind Navbar: A Complete Guide For Stunning User Experience | |
|
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Unlike traditional CSS frameworks like Bootstrap, which come with predefined components, Tailwind allows developers to construct their own unique design system by combining a series of small, reusable classes. You can use Tailwind CSS to build the navigation bar (navbar) component. Navbars are essential elements in web development because they provide a roadmap to the content on a website. They improve the user experience by making navigation easier, allowing users to quickly find the information they need. This guide will walk you through creating a responsive navbar component with Tailwind CSS, covering the basics, code structure, responsive design, and advanced features like adding dark mode and dropdown menus. By the end, the article will equip you to apply these concepts to your projects and create a tailored, functional navbar. Let’s dive in
How do you make a Navigation bar using Tailwind CSS?
Creating a navigation bar with Tailwind CSS involves several steps, including setting up a Tailwind CSS project, creating a basic navbar, and adding a dropdown menu.
Setting up a Tailwind CSS project
Before you can start building your navbar, you need to set up a Tailwind CSS project. This involves installing Tailwind CSS into your project and configuring your template paths. You can install Tailwind CSS using a package manager such as npm or yarn. Step 1: Create a folder and open it using your code editor.
Step 2: Initialize NPM in that folder.
npm init -y
and, Step 3: Install Tailwind CSS and create a tailwind.config.js file using the command below.
npm install -D tailwindcss npx tailwindcss init
In the tailwind.config.js add the paths to all of your template files.
/** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], }
In your project folder, create a new folder called src.
Then, in the src folder, create a new file called input.css for your main CSS, and add the @tailwind directives for each of Tailwind’s layers to your main CSS file .
@tailwind base; @tailwind components; @tailwind utilities;
Start the Tailwind CLI build process by running the command below
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Proceed to create an index.html file inside the src folder.
Add your compiled CSS file (In the dist folder) to the <head> and start using Tailwind’s utility classes to style your content
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="../dist/output.css" rel="stylesheet"> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body> </html>
With this, you should have your Tailwind setup and you can proceed to write your code.
Creating a simple navbar with Tailwind CSS
In creating a navbar, it is best practice to use the nav element, after which you can populate it with the necessary items. Here is a simple navbar with some menu items: <nav class="flex justify-start"> <div class="hidden md:flex items-center space-x-1"> <a href="" class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold ">Home</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Services</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">About</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Contact
Us</a>
</nav>
</div>
In this code, the parent nav bar element has a class “flex justify-start“. The flex class makes the navigation bar a flex container, allowing the navbar to display its children in a row. The justify-start class aligns the children (in this case, the navigation links) to the start of the flex container, pushing them to the left. For the div element, a class of “hidden md:flex items-center space-x-1” was used, these classes style the wrapping <div> as follows:
hidden: This class hides the <div> by default, making it invisible on screens smaller than the medium (md) breakpoint.
md:flex: This class makes the <div> visible (displays it as a flex container) on screens equal to or larger than the medium (md) breakpoint. items-center: This class vertically centers the content inside the <div>, ensuring that the navigation links are vertically aligned.
space-x-1: This class adds horizontal spacing of 0.25rem (1/4th of the default spacing) between the child elements (navigation links).
For the anchor elements representing the navigation links, the class=”py-4 px-2 text-green-500 border-b-4 border-green-500 font- semibold” was used. These are Tailwind CSS classes applied to each navigation link. They style the links as follows: py-4: Adds vertical padding of 1rem (4 times the default spacing).
px-2: Adds horizontal padding of 0.5rem (2 times the default spacing).
text-green-500: Sets the text color to a shade of green (#10B981).
border-b-4 border-green-500: Adds a 4px thick green (#10B981) bottom border to the link, giving it an underline effect.
font-semibold: Makes the text bold (semibold).
This will create a simple navbar and it should look like this
How to add a dropdown menu in your Navigation bar
To create a responsive navigation bar with a dropdown menu in Tailwind CSS, you need to follow a few steps involving HTML, Tailwind CSS, and JavaScript. Let’s break down the process.
Step 1: Create the HTML StructureHere’s a simple structure for a navigation bar with a dropdown button
<nav class="bg-white shadow-lg"> <div class="max-w-6xl mx-auto px-4"> <div class="flex justify-between">
10">
</nav>
<div class="hidden md:flex items-center space-x-1"> <a href="" class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold ">Home</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Services</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">About</a> <div class="relative text-left dropdown"> <button class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300"> Contact Us </button> <ul class="hidden dropdown-menu absolute right-0 mt-2 w-48 bg-gray-800 rounded-md overflow-hidden z-
<li href="#" class="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-700">Link 1</li> <li href="#" class="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-700">Link 2</li> <li href="#" class="block px-4 py-2 text-sm text-gray-200 hover:bg-gray-700">Link 3</li> </ul> </div> </div> </div> </div>
In this example, we have a navigation bar with three links: Home, About, and Contact. The dropdown button is labeled “Dropdown” and has three links in its dropdown menu.
Step 2: Add JavaScript for Dropdown Toggle
<style>
.dropdown:focus-within .dropdown-menu { /* @apply block; */ display: block;
} </style
In the code above, when the element with the class dropdown-menu is clicked or focused on, it will set the display property of the selected “.dropdown-menu” element to “block.” When an element’s display property is set to “block,” it means that the element is rendered as a block- level element, taking up the full width of its parent container and stacking vertically. This makes the dropdown menu visible and takes up space in the layout.
Aligning your Navbar content
In Tailwind CSS, you can use the justify-content property to align the content of your navbar. This property defines how the browser distributes space between and around content items along the main axis of a flex container, and it’s very useful for aligning navbar items.
How do you align the navbar to the center in Tailwind?
To center the items in your navbar, you can use the justify-center class. Here is an example:
<div class="flex justify-center"> <div class="hidden md:flex items-center space-x-1"> <a href="" class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold ">Home</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Services</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">About</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Contact
Us</a>
</div>
</div>
In this example, the justify-center class is used to center the navbar items. The flex class is used to set the display property of the navbar to flex
How do you align the navbar to the right in Tailwind?
To align the items in your navbar to the right, you can use the justify-end class. Here is an example:
<div class="flex justify-end"> <div class="hidden md:flex items-center space-x-1"> <a href="" class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold ">Home</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Services</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">About</a> <a href="" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Contact Us</a> </div> </div> Align the navbar to the right in Tailwind
In this example, the justify-end class is used to align the navbar items to the right. There are other ways to justify your content using Tailwind CSS, you can see other options from the documentation.
Customizing your Tailwind CSS NavbarWhen creating a navigation bar with Tailwind CSS, there are multiple ways you can customize it to fit the needs of your website. Two popular customizations include adding images (such as logos or icons) and adding a search input element for user convenience. How to use images (SVG, Icons, etc.) in your NavBarImages can be added to your navbar to enhance its visual appeal and functionality. For example, you can add a company logo to reinforce your brand or use icons to represent different sections of your website. To add an image, you can use the img HTML tag and apply Tailwind CSS classes to adjust its appearance. Here’s an example of how to add a logo to your navbar <div> <a href="#" class="flex items-center py-4 px-2"> <img src="./logo.webp" alt="Logo" class="h-8 w-8 mr-2"> <span class="font-semibold text-gray-500 text-lg">PureCode</span> </a></div>
In this example, an img tag is used to insert the logo image, and Tailwind CSS classes are used to adjust the size (h-8 w-8) and margin (mr-2) of the image. The flex items-center classes are used to center the logo and text vertically within their container.
tailwind navbar with icon
How to add a search input to your Navbar
A search input can be a useful addition to your navbar, allowing users to quickly find the information they need. To add a search input, you can use the input HTML tag and apply Tailwind CSS classes to style it. Here’s an example of how to add a search input to your navbar <div class="mt-3"> <input placeholder="Search" class="appearance-none rounded-r rounded-l sm:rounded-l-none border border-gray-400 border-b block pl-8 pr-6 py-2 w-full bg-white text-sm placeholder-gray-400 text-gray-700 focus:bg-white focus:placeholder-gray-600 focus:text-gray-700 focus:outline-none" /> </div>
In this example, an input tag is used to create the search input, and Tailwind CSS classes are used to style it. The placeholder attribute is used to display a hint to the user about what they should type in the input. These examples illustrate some of the ways you can customize your navigation bar using Tailwind CSS. By combining HTML and Tailwind CSS, you can create a navbar that is visually appealing, functional, and tailored to your specific needs.
tailwind navbar with search input
How to Create a Responsive Navigation Bar using Tailwind CSS
Utilizing breakpoints and responsive classes in tailwind CSS
The code utilizes Tailwind CSS classes to create a responsive navigation bar. It uses responsive classes like lg:px-0, lg:hidden, and lg:text- white to define different styles and behaviors based on screen size breakpoints.
These breakpoints are defined by the “lg” prefix, which targets screens larger than the “lg” breakpoint (usually desktop screens). For example, lg:px-0 sets horizontal padding to 0 for screens larger than the “lg” breakpoint.
Adding a hamburger icon for mobile with Tailwind CSS
To create a hamburger icon for mobile navigation, the code uses an HTML input element with the class hidden. This input serves as a checkbox input with the id “hamburger.” Additionally, a label element is used with the class peer-checked:hamburger, which is conditionally applied when the “hamburger” input is checked (i.e. when the mobile menu is active). Inside the label, two horizontal bars are created using w-6 and h-0.5 classes with transitions. These bars form the hamburger icon when displayed on smaller screens (hidden on larger screens).
Toggling the menu with Tailwind CSS
The code toggles the visibility of the mobile menu by changing the transform property using the –translate-y-full and peer- checked:translate-y-0 classes. When the “hamburger” input is checked (i.e., the mobile menu is active), the mobile menu slides down into view. For larger screens, the menu remains static and is not affected by the translation transformation.
The navigation links inside the menu are styled differently for different screen sizes, with text-black for smaller screens and text-white for larger screens, providing a smooth transition when the menu is toggled. Here is the code for this below:
<div class="bg-blue-500"> <div class="flex justify-between items-center p-6 px-6 lg:px-0 container mx-auto"> <div class="text-lg font-bold uppercase text-white">PureCode</div> <!-- Hamburger --> <input class="peer hidden" type="checkbox" name="hamburger" id="hamburger" /> <label class="peer-checked:hamburger block relative cursor-pointer lg:hidden border-2 border-gray-300 peer-checked:border-2 peer-checked:border-white p-3 rounded-md transition-all" for="hamburger"> <div class="m-auto w-6 h-0.5 rounded bg-gray-300 transition-all duration-300"></div> <div class="m-auto mt-2 w-6 h-0.5 rounded bg-gray-300 transition-all duration-300"></div> </label>
<!-- Menu Navbar --> <div class="-translate-y-full peer-checked:translate-y-0 lg:translate-y-0 inset-0 fixed lg:static pt-20 lg:pt-0 bg-white lg:bg- transparent -z-10 lg:z-10 lg:h-auto lg:w-auto transition-all duration-300 ease-in-out"> <div class="bg-white shadow-md lg:bg-transparent lg:shadow-none py-10 lg:py-0 flex flex-col lg:items-center lg:flex-row px-6 space-y-4 lg:space-y-0 lg:space-x-12"> <a class="text-black lg:text-white hover:text-gray-300 transition-all" href="">Home</a> <a class="text-black lg:text-white hover:text-gray-300 transition-all" href="">Services</a> <a class="text-black lg:text-white hover:text-gray-300 transition-all" href="">About</a> <a class="text-black lg:text-white hover:text-gray-300 transition-all" href="">Contact Us</a> |
 |