Simple Navbar

Explore the flexibility of Navbar components styled with Tailwind CSS, perfect for creating elegant and functional navigation menus.

Preview
Code

<nav class="bg-white border-gray-200 dark:bg-gray-900 shadow-md">
      <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <a href="https://www.codewithfaraz.com/" class="flex items-center">
            <img src="https://www.codewithfaraz.com/InstaPic.png" class="h-8 mr-3" alt="codewithfaraz Logo" />
            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">CodewithFaraz</span>
        </a>
        <button id="navbar-toggle" data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
            <span class="sr-only">Open main menu</span>
            <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
            </svg>
        </button>
        <div class="hidden w-full md:block md:w-auto" id="navbar-default">
          <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
            <li>
              <a href="#" class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
            </li>
            <li>
              <a href="#" class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
            </li>
            <li>
              <a href="#" class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Services</a>
            </li>
            <li>
              <a href="#" class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Product</a>
            </li>
            <li>
              <a href="#" class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

```
No Custom CSS
```

document.addEventListener('DOMContentLoaded', function () {
      const button = document.getElementById('navbar-toggle');
      const menu = document.getElementById('navbar-default');

      button.addEventListener('click', function () {
      menu.classList.toggle('hidden');
        });
      });

Elevate the navigation experience on your website with Navbar components styled using Tailwind CSS. Whether you're designing a personal blog, an e-commerce platform, or any other web application, a well-crafted navigation bar is essential for guiding users through your site's content efficiently.

Tailwind CSS's utility-first approach allows you to create sleek and responsive Navbar components effortlessly. With Tailwind's extensive set of utility classes, you can customize the appearance, layout, and behavior of your navigation bars to match your website's design language seamlessly.

The Navbar component enhances user experience by providing a clear and intuitive way for users to navigate between different sections of your website. Tailwind CSS enables you to implement features such as dropdown menus, mobile responsiveness, and custom branding options, ensuring that your navigation bar is both visually appealing and functional across devices.

Integrating Navbar components with Tailwind CSS is straightforward, thanks to its well-documented classes and modular components. Whether you're a beginner or an experienced developer, you can quickly integrate and customize navigation bars to suit your website's navigation requirements.

With Navbar components styled using Tailwind CSS, you can create visually appealing and highly functional navigation menus that improve user engagement and facilitate content discovery. Simplify navigation through your website's content and enhance user experience with customizable navbar interfaces tailored to your website's needs.

Steps to Copy the Code

Follow these steps to copy the code and personalize it to match your website's design:

Copy the Code: Start by copying the code for the Navbar component from the above code snippet.
Paste into Your Project: Open your project files in a code editor and paste the copied code into the appropriate location where you want the Navbar to appear on your website.
Include Tailwind CSS: Ensure that you've included the Tailwind CSS framework in your project. You can either link to the CDN or download the CSS file and include it locally in your project.
Customize as Needed: Tailwind CSS offers a wide range of utility classes that you can leverage to customize the appearance and behavior of your Navbar. Modify the code to match your design preferences, such as adjusting colors, sizes, and styles for the Navbar items and dropdowns.
Test and Refine: After making modifications, thoroughly test the Navbar in various browsers and screen sizes to ensure it displays correctly and functions as expected. Make any necessary adjustments to refine its appearance and behavior.
Enhance with Interactivity (Optional): Consider adding JavaScript functionality to enhance the interactivity of your Navbar, such as implementing mobile responsiveness or adding dropdown menus.

By following these steps, you'll be able to effectively customize a Navbar component using Tailwind CSS, allowing you to create a seamless and intuitive navigation experience for your website visitors.

Code Explanation

<nav class="bg-white border-gray-200 dark:bg-gray-900 shadow-md">

This is the opening tag for a navigation element. It has several classes applied to it:

bg-white: Sets the background color to white.
border-gray-200: Sets a border with a gray color.
dark:bg-gray-900: Sets the background color to dark gray for dark mode.
shadow-md: Applies a medium shadow.

<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">

Inside the navigation element, there's a div containing the main content. It has the following classes:

max-w-screen-xl: Sets the maximum width of the container to extra large screens.
flex: Makes the container a flex container.
flex-wrap: Allows flex items to wrap if they exceed the container width.
items-center: Aligns items vertically in the center.
justify-between: Aligns items evenly along the main axis with space between them.
mx-auto: Horizontally centers the container.
p-4: Applies padding of 4 units to all sides.

<a href="https://www.codewithfaraz.com/" class="flex items-center">

This is an anchor tag linking to a website. It has the classes:

flex: Makes the anchor tag a flex container.
items-center: Aligns items vertically in the center.

<img src="https://www.codewithfaraz.com/InstaPic.png" class="h-8 mr-3" alt="codewithfaraz Logo" />

Inside the anchor tag, there's an image element. It sets the following attributes:

src: Specifies the URL of the image.
class="h-8 mr-3": Sets the height of the image to 8 units and applies a right margin of 3 units.
alt="codewithfaraz Logo": Provides alternative text for the image.

<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">CodewithFaraz</span>

This is a span element containing text. It has the classes:

self-center: Aligns the text vertically in the center.
text-2xl: Sets the font size to extra large.
font-semibold: Sets the font weight to semi-bold.
whitespace-nowrap: Prevents wrapping of text.
dark:text-white: Sets the text color to white for dark mode.

<button id="navbar-toggle" data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">

This is a button element used for toggling the navigation menu on small screens. It has several classes applied to it:

inline-flex: Makes the button an inline flex container.
items-center: Aligns items vertically in the center.
p-2: Applies padding of 2 units to all sides.
w-10: Sets the width to 10 units.
h-10: Sets the height to 10 units.
justify-center: Aligns content horizontally in the center.
text-sm: Sets the font size to small.
text-gray-500: Sets the text color to gray.
rounded-lg: Applies a large border radius.
md:hidden: Hides the button on medium screens.
hover:bg-gray-100: Changes background color on hover.
focus:outline-none: Removes the outline on focus.
focus:ring-2 focus:ring-gray-200: Adds focus ring with gray color.
dark:text-gray-400: Sets the text color to gray for dark mode.
dark:hover:bg-gray-700 dark:focus:ring-gray-600: Changes background color and focus ring color on hover and focus for dark mode.

<span class="sr-only">Open main menu</span>

This is a span element providing screen reader-only text. It informs users with screen readers that the button opens the main menu.

<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>

Inside the button, there's an SVG icon representing a menu. It sets the following attributes:

class="w-5 h-5": Sets the width and height to 5 units.
aria-hidden="true": Informs screen readers to ignore the icon.
xmlns="http://www.w3.org/2000/svg": Defines the XML namespace.
fill="none": Sets the fill color to transparent.
viewBox="0 0 17 14": Defines the view box for the SVG content.
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2": Defines the stroke properties of the icon.
d="M1 1h15M1 7h15M1 13h15": Defines the path of the icon.

<div class="hidden w-full md:block md:w-auto" id="navbar-default">

This is a div element containing the navigation menu items. It has the following classes:

hidden: Hides the div by default.
w-full: Sets the width to full.
md:block: Displays the div as a block on medium screens.
md:w-auto: Sets the width to auto on medium screens.

<ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">

This is an unordered list containing the navigation items. It has several classes:

font-medium: Sets the font weight to medium.
flex: Makes the list a flex container.
flex-col: Arranges list items vertically.
p-4: Applies padding of 4 units to all sides.
md:p-0: Removes padding on medium screens.
mt-4: Applies margin on the top.
border: Applies a border.
border-gray-100: Sets the border color to gray.
rounded-lg: Applies a large border radius.
bg-gray-50: Sets the background color to light gray.
md:flex-row: Arranges list items horizontally on medium screens.
md:space-x-8: Adds space between list items on medium screens.
md:mt-0: Removes margin on medium screens.
md:border-0: Removes border on medium screens.
md:bg-white: Sets the background color to white on medium screens.
dark:bg-gray-800: Sets the background color to dark gray for dark mode.
md:dark:bg-gray-900: Sets the background color to dark gray on medium screens for dark mode.
dark:border-gray-700: Sets the border color to dark gray for dark mode.

<li>
    <a href="#" class="block py-2 pl-3 pr-4 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">Home</a>
</li>

This is a list item containing a navigation link for the "Home" page. It has the following classes:

block: Displays the link as a block element.
py-2: Applies padding on the y-axis.
pl-3 pr-4: Applies padding on the x-axis.
text-white: Sets the text color to white.
bg-blue-700: Sets the background color to blue.
rounded: Applies a border radius.
md:bg-transparent: Sets the background color to transparent on medium screens.
md:text-blue-700: Sets the text color to blue on medium screens.
md:p-0: Removes padding on medium screens.
dark:text-white: Sets the text color to white for dark mode.
md:dark:text-blue-500: Sets the text color to blue on medium screens for dark mode.

Similarly, the other list items follow the same structure with different text and styling. They represent different navigation links such as "About", "Services", "Product", and "Contact".