Making Tailwind CSS Navbars
Making Tailwind CSS Navbars
This tutorial is part of our Learn Tailwind CSS Guide

Making Tailwind CSS Navbars

Chris Sev's Profile
Chris Sevon Jun 24, 2021

Tailwind CSS makes it easy to create navbars thanks to its flexbox classes.

Tailwind CSS lets us quickly create navbars. In this tutorial we'll build out a quick navbar that is good enough to work for most sites. This navbar will also be a great foundation for anything more advanced you need to do.

Here's the code that we'll use as a foundation. You can build inside of a new CodePen and make sure you add the Tailwind stylesheet in the CodePen's CSS settings.

html<nav class="flex px-8 bg-gray-100">

  <!-- content goes here -->
  
</nav>

We'll have a parent element with flex and we'll add px-8 (padding) so that the contents of our navbar doesn't hit the left and right edges of our browser viewport. We'll also add a background color.

The strategy is to have a two separate divs that will be pushed to the left and right using flexbox and justify content. Once you understand how to use flexbox, you can create any style of navbar.

Remember to watch the full video to get the walkthrough on how to build these navbars.

Here we'll use justify-between to make a navbar that sits on the left and right. We'll also add padding to each <a> tag to give it some spacing. Increase the vertical padding if you want your navbar to be taller. The benefit to adding the padding and the block class on the <a> tag instead of on the nav is that the entire height of the navbar is clickable now.

We are adding flex and space-x-3 to have elements on each side sit side-by-side. We also add items-center to make sure that all elements are vertically aligned.

html<nav class="flex px-8 bg-gray-100 justify-between">
  <!-- left side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Logo</a>
    <a class="block p-3">Features</a>
    <a class="block p-3">Pricing</a>
  </div>

  <!-- right side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Sign Up</a>
    <a class="block p-3">Login</a>
  </div>
</nav>

<nav class="flex px-8 bg-gray-100 justify-between">
  <!-- left side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Logo</a>
    <a class="block p-3">Features</a>
    <a class="block p-3">Pricing</a>
  </div>
  <!-- right side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Sign Up</a>
    <a class="block p-3">Login</a>
  </div>
</nav>

For the centered logo navbar, we'll three child divs.

html<nav class="flex px-8 bg-gray-100 justify-between">
  <!-- left side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Features</a>
    <a class="block p-3">Pricing</a>
  </div>

  <!-- center -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Logo</a>
  </div>

  <!-- right side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Sign Up</a>
    <a class="block p-3">Login</a>
  </div>
</nav>

<nav class="flex px-8 bg-gray-100 justify-between">
  <!-- left side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Features</a>
    <a class="block p-3">Pricing</a>
  </div>
  <!-- center -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Logo</a>
  </div>
  <!-- right side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Sign Up</a>
    <a class="block p-3">Login</a>
  </div>
</nav>

We can style the buttons here like we would for any other Tailwind CSS buttons. We'll make a blue "Sign Up" and a yellow "Login" button.

html<!-- right side -->
<div class="flex items-center space-x-3">
  <a class="block my-3 py-1.5 px-3 bg-blue-400 hover:bg-blue-300 text-blue-900 hover:text-blue-800 rounded transition duration-300">Sign Up</a>
  <a class="block my-3 py-1.5 px-3 bg-yellow-400 hover:bg-yellow-300 text-yellow-900 hover:text-yellow-800 rounded transition duration-300">Login</a>
</div>

<nav class="flex px-8 bg-gray-100 justify-between">
  <!-- left side -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Features</a>
    <a class="block p-3">Pricing</a>
  </div>
  <!-- center -->
  <div class="flex items-center space-x-3">
    <a class="block p-3">Logo</a>
  </div>
  <!-- right side -->
  <div class="flex items-center space-x-3">
    <a class="block my-3 py-1.5 px-3 bg-blue-400 hover:bg-blue-300 text-blue-900 hover:text-blue-800 rounded transition duration-300">Sign Up</a>
    <a class="block my-3 py-1.5 px-3 bg-yellow-400 hover:bg-yellow-300 text-yellow-900 hover:text-yellow-800 rounded transition duration-300">Login</a>
  </div>
</nav>

Notice that we adjust the padding of the button and add margin so that we can get some spacing above and below the buttons.

Using flexbox lets us quickly create navbar layouts. Be sure to check out the YouTube video on making navbars and we also have our Tailwind course: BeginnerTailwind.com.

If you enjoyed this tutorial, We also have a Getting Started with Tailwind course.

Chris Sev

Chris Sev

Chris Sev is the co-founder of Better Dev. Coding better every day. Previously he created Scotch.io which was acquired.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)