Tailwind Navbar and Footer

A navbar sits at the top of every page. A footer sits at the bottom. Together, they frame your entire website. Tailwind CSS gives you the tools to build both without writing a single line of custom CSS.

What a Navbar Does

A navbar holds your logo, navigation links, and action buttons like "Sign In" or "Get Started". Users expect to find it at the top. It stays fixed or scrolls — depending on your design choice.

Building a Basic Navbar

Start with a <nav> tag. Use flex to arrange items in a row. Use justify-between to push the logo left and links right. Use items-center to align everything vertically.

<nav class="flex justify-between items-center px-6 py-4 bg-white shadow">
  <div class="text-xl font-bold text-blue-600">MyBrand</div>
  <ul class="flex gap-6 text-gray-700">
    <li><a href="#" class="hover:text-blue-600">Home</a></li>
    <li><a href="#" class="hover:text-blue-600">About</a></li>
    <li><a href="#" class="hover:text-blue-600">Contact</a></li>
  </ul>
</nav>

What Each Class Does

  • flex — puts items side by side
  • justify-between — pushes logo and links to opposite ends
  • items-center — aligns all items to the middle vertically
  • px-6 py-4 — adds padding left/right and top/bottom
  • shadow — adds a subtle drop shadow below the navbar
  • hover:text-blue-600 — changes link color when hovered

Navbar Layout Diagram

+-----------------------------------------------+
|  [Logo]          [Home] [About] [Contact]      |
+-----------------------------------------------+
   ↑ left side                    ↑ right side
   text-xl font-bold              flex gap-6

Adding a Call-to-Action Button

Most navbars have a button on the right side. Add it inside the same flex container.

<nav class="flex justify-between items-center px-6 py-4 bg-white shadow">
  <div class="text-xl font-bold text-blue-600">MyBrand</div>
  <div class="flex items-center gap-6">
    <ul class="flex gap-6 text-gray-700">
      <li><a href="#" class="hover:text-blue-600">Home</a></li>
      <li><a href="#" class="hover:text-blue-600">About</a></li>
    </ul>
    <a href="#" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Get Started</a>
  </div>
</nav>

Making the Navbar Sticky

A sticky navbar stays at the top even when you scroll down. Add sticky top-0 z-50 to the <nav> tag.

<nav class="sticky top-0 z-50 flex justify-between items-center px-6 py-4 bg-white shadow">
  • sticky — keeps the element in flow but fixes it when you scroll past it
  • top-0 — sticks it to the very top edge
  • z-50 — makes sure it appears above other content

Responsive Navbar with Mobile Menu

On small screens, horizontal nav links don't fit. Hide them on mobile and show a hamburger icon instead. Reveal the menu with JavaScript when the icon is clicked.

<nav class="flex justify-between items-center px-6 py-4 bg-white shadow">
  <div class="text-xl font-bold text-blue-600">MyBrand</div>

  <!-- Desktop Links -->
  <ul class="hidden md:flex gap-6 text-gray-700">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>

  <!-- Mobile Hamburger Icon -->
  <button class="md:hidden text-gray-700" id="menuBtn">☰</button>
</nav>

<!-- Mobile Dropdown Menu -->
<div class="hidden md:hidden bg-white px-6 py-4" id="mobileMenu">
  <ul class="flex flex-col gap-4 text-gray-700">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<script>
  document.getElementById('menuBtn').addEventListener('click', function () {
    document.getElementById('mobileMenu').classList.toggle('hidden');
  });
</script>

Responsive Classes Used

  • hidden md:flex — hidden on mobile, shown as flex on medium screens and up
  • md:hidden — visible on mobile, hidden on medium screens and up
  • flex-col — stacks links vertically in mobile menu

Mobile vs Desktop Navbar Diagram

Mobile (small screen):
+-----------------------------------+
|  [Logo]                    [≡]    |
+-----------------------------------+
|  Home                             |
|  About                            |
|  Contact                          |
+-----------------------------------+

Desktop (md and above):
+-------------------------------------------+
|  [Logo]      [Home] [About] [Contact]     |
+-------------------------------------------+

Building a Footer

A footer holds links, copyright text, social icons, and extra information. It lives at the very bottom of your page.

<footer class="bg-gray-900 text-gray-400 px-6 py-10">
  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">

    <!-- Brand Column -->
    <div>
      <h3 class="text-white text-lg font-bold mb-3">MyBrand</h3>
      <p class="text-sm">We build tools that help teams work better.</p>
    </div>

    <!-- Links Column -->
    <div>
      <h4 class="text-white font-semibold mb-3">Quick Links</h4>
      <ul class="flex flex-col gap-2 text-sm">
        <li><a href="#" class="hover:text-white">Home</a></li>
        <li><a href="#" class="hover:text-white">About</a></li>
        <li><a href="#" class="hover:text-white">Blog</a></li>
      </ul>
    </div>

    <!-- Contact Column -->
    <div>
      <h4 class="text-white font-semibold mb-3">Contact</h4>
      <p class="text-sm">hello@mybrand.com</p>
      <p class="text-sm mt-1">+1 800 123 4567</p>
    </div>

  </div>

  <!-- Bottom Bar -->
  <div class="mt-10 border-t border-gray-700 pt-6 text-center text-sm">
    © 2025 MyBrand. All rights reserved.
  </div>
</footer>

Footer Layout Diagram

+-----------------------------------------------+
|  [Brand]        [Links]        [Contact]      |
|  MyBrand        Home           email           |
|  Tagline        About          phone           |
|                 Blog                           |
+-----------------------------------------------+
|        © 2025 MyBrand. All rights reserved.   |
+-----------------------------------------------+
   ↑ grid-cols-3 on md, grid-cols-1 on mobile

Useful Footer Utility Classes

  • grid grid-cols-3 — creates a 3-column layout
  • gap-8 — adds space between columns
  • max-w-6xl mx-auto — centers content with a max width
  • border-t border-gray-700 — draws a top border for the bottom bar
  • text-center — centers the copyright text

Simple Footer for Small Projects

Not every site needs a three-column footer. A one-liner footer works well for small sites.

<footer class="bg-gray-100 text-center py-6 text-sm text-gray-500">
  © 2025 MyBrand. Built with Tailwind CSS.
</footer>

Navbar + Footer Page Skeleton

+-----------------------------------------------+
|              NAVBAR (sticky top-0)            |
+-----------------------------------------------+
|                                               |
|              PAGE CONTENT (main)              |
|                                               |
+-----------------------------------------------+
|              FOOTER (bg-gray-900)             |
+-----------------------------------------------+

<nav class="sticky top-0 z-50 ..."> ... </nav>

<main class="min-h-screen px-6 py-12">
  <!-- Your page content goes here -->
</main>

<footer class="bg-gray-900 ..."> ... </footer>

Key Points

  • Use flex justify-between items-center as the base structure for any navbar
  • Add sticky top-0 z-50 to make the navbar stick while scrolling
  • Use hidden md:flex and md:hidden to handle responsive behavior
  • Use grid grid-cols-1 md:grid-cols-3 to create a multi-column footer
  • A border-t line in the footer clearly separates the main content from the copyright bar
Previous lessons
Back to courses
Next lessons

Leave a Comment