Michael Burrows

Style a responsive navbar component with Tailwind CSS

Michael Burrows's photo
Michael Burrows
·

6 min read

In this tutorial we’ll be building a responsive navbar using the Tailwind CSS framework. Unlike other CSS frameworks Tailwind doesn’t include any pre-built components but rather allows you to design and build custom components using utility classes.

The finished product will look like the following:

Alt Text

Alt Text

For the purposes of this tutorial we’ll install Tailwind using a CDN but in production environments it’s recommend to install Tailwind as a PostCSS plugin.

Let’s get started by creating a HTML file with the following markup:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Responsive Navbar - Tailwind CSS</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />      
  </head>
  <body>
    <!-- navbar here -->      
    <script src="script.js"></script>
  </body>
</html>

First is the navbar wrapper element:

<nav class="flex flex-wrap items-center justify-between p-5 bg-blue-200">      
<!-- logo -->
<!-- hamburger -->
<!-- links -->
<!-- cta -->
</nav>
  • flex flex-wrap – display using flexbox and wrap items larger than the parent.
  • items-center – align items along the center of the x-axis.
  • justify-between – evenly distribute’s navbar elements across the horizontal axis.
  • p-5 – add’s even padding to all sides of the navbar, size of the padding can be adjusted by changing the number from anywhere between 0 and 10.
  • bg-blue-200 – set’s the background color blue, tone of color can be adjusted by changing the number from 50 then at multiples of 100 up to 900.

The first element in the navbar is a logo which doesn’t require any CSS:

<img src="http://acmelogos.com/images/logo-1.svg" alt="ACME" width="120" />

Next comes the hamburger button for toggling the menu visibility on small screen’s:

<div class="flex md:hidden">
  <button id="hamburger">
    <img class="toggle block" src="https://img.icons8.com/fluent-systems-regular/2x/menu-squared-2.png" width="40" height="40" />
    <img class="toggle hidden" src="https://img.icons8.com/fluent-systems-regular/2x/close-window.png" width="40" height="40" />
  </button>
</div>

Tailwind CSS follow’s the mobile-first approach, so we build from small to larger screen’s. In this instance the hamburger is visible on small screens (flex) then hidden on medium (md:hidden) and above sized screens.

We’ve also used a toggle class here that isn’t actually part of Tailwind. This class will be applied to everything that we wan’t to toggle the visibility of when the hamburger button is clicked.

Text links have a wrapper <div> once again using toggle:

<div class="toggle hidden md:flex w-full md:w-auto text-right text-bold mt-5 md:mt-0 border-t-2 border-blue-900 md:border-none">        
  <a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Home</a>
  <a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Products</a>
  <a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Pricing</a>
  <a href="#" class="block md:inline-block text-blue-900 hover:text-blue-500 px-3 py-3 border-b-2 border-blue-900 md:border-none">Contact</a>
</div>

Firstly let’s go over the classes used on the wrapper <div> element:

  • hidden md:flex – links are hidden on smaller screens until the visibility is toggled via the hamburger button.
  • w-full md:w-auto – display the menu as full width on small screens only.
  • text-right text-bold – right align the text with a bold font weight.
  • mt-5 md:mt-0 – applies a margin to the top of the menu.
  • border-t-2 border-blue-900 md:border-none – single blue 2px dividing border on the top of the menu on smaller screens that’s removed on larger screens.

And the individual text links:

  • block md:inline-block – display as block (full width) on small screen’s and inline on larger screen’s.
  • text-blue-900 hover:text-blue-500 – hover styles in Tailwind are applied by pre-pending the desired style with hover.
  • px-3 py-3 – even padding on both the x-axis (horizontal) and y-axis (vertical).
  • border-b-2 border-blue-900 md:border-none – blue 2px border on the bottom of each of the links on small screen’s only.

Finally we’ll include a CTA button to the far right of the navbar:

<a href="#" class="toggle hidden md:flex w-full md:w-auto px-4 py-2 text-right bg-blue-900 hover:bg-blue-500 text-white md:rounded">Create Account</a>

The only class we haven’t used previously is md:rounded which applies a border radius giving the button corner’s a slightly rounded appearance.

That completes the CSS now we just need to add the JavaScript to toggle the menu visibility on small screen’s. Create a script.js file with the following:

document.getElementById("hamburger").onclick = function toggleMenu() {
  const navToggle = document.getElementsByClassName("toggle");
  for (let i = 0; i < navToggle.length; i++) {
    navToggle.item(i).classList.toggle("hidden");
  }
};

This code toggles the hidden class on each toggle element when the hamburger is clicked.

You should now be able to style your own responsive navbar using Tailwind CSS. If you would like to learn more about Tailwind and all the available classes the official documentation is very user friendly.

Tailwind CSSTutorialCSSCSS Frameworks