Navbar & Footer Design in Tailwind CSS 4 – Complete Guide

The navbar and footer are essential components of any website layout.

They help users navigate the website and access important information quickly.

A well-designed navigation bar improves user experience and usability.

Common navbar features include:

responsive navigation menu
sticky navigation
dropdown menus
mobile navigation

Footers usually contain:

company information
quick links
social media links
copyright text

In this tutorial you will learn:

Responsive navbar
Sticky navbar
Dropdown menu
Footer layout

We will use the Tailwind CSS 4 CDN.

https://unpkg.com/@tailwindcss/browser@4

Step 1: Setup Tailwind CSS CDN

Create a basic HTML file.

<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>

<body class="bg-gray-100">

<h1 class="text-3xl font-bold p-10">
Tailwind Navbar & Footer
</h1>

</body>
</html>

Now Tailwind utilities are ready.

Responsive Navbar

A responsive navbar adapts to different screen sizes.

Example

<nav class="bg-blue-600 text-white">

<div class="max-w-6xl mx-auto px-4">

<div class="flex justify-between items-center h-16">

<div class="font-bold text-xl">
MyWebsite
</div>

<div class="hidden md:flex space-x-6">

<a href="#" class="hover:text-gray-200">Home</a>
<a href="#" class="hover:text-gray-200">About</a>
<a href="#" class="hover:text-gray-200">Services</a>
<a href="#" class="hover:text-gray-200">Contact</a>

</div>

</div>

</div>

</nav>

Explanation:

Class	Purpose
flex	horizontal layout
justify-between	space between logo and menu
hidden md:flex	hide menu on mobile

Mobile Responsive Navbar

For mobile screens we usually add a menu button.

<nav class="bg-blue-600 text-white">

<div class="max-w-6xl mx-auto px-4">

<div class="flex justify-between items-center h-16">

<div class="font-bold text-xl">
Logo
</div>

<button class="md:hidden">
☰
</button>

<div class="hidden md:flex space-x-6">

<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>

</div>

</div>

</div>

</nav>

On mobile devices, the menu icon appears.

Sticky Navbar

A sticky navbar stays visible when scrolling.

Example

<nav class="sticky top-0 bg-white shadow z-50">

<div class="max-w-6xl mx-auto px-4">

<div class="flex justify-between items-center h-16">

<div class="font-bold text-lg">
MySite
</div>

<div class="flex gap-6">

<a href="#" class="hover:text-blue-500">Home</a>
<a href="#" class="hover:text-blue-500">Blog</a>
<a href="#" class="hover:text-blue-500">Contact</a>

</div>

</div>

</div>

</nav>

Explanation:

Class	Role
sticky	sticks during scroll
top-0	top position
z-50	above other elements

Dropdown Menu

Dropdown menus allow users to access sub-menu items.

Example

<div class="relative group inline-block">

<button class="bg-blue-500 text-white px-4 py-2 rounded">
Services
</button>

<div class="absolute hidden group-hover:block bg-white shadow rounded mt-2">

<a href="#" class="block px-4 py-2 hover:bg-gray-100">
Web Development
</a>

<a href="#" class="block px-4 py-2 hover:bg-gray-100">
SEO
</a>

<a href="#" class="block px-4 py-2 hover:bg-gray-100">
Marketing
</a>

</div>

</div>

Explanation:

Class	Purpose
relative	parent container
absolute	dropdown position
group-hover:block	show dropdown on hover

Navbar with Dropdown

<nav class="bg-gray-900 text-white p-4">

<div class="flex justify-between">

<div class="font-bold">
MySite
</div>

<div class="flex gap-6">

<a href="#">Home</a>

<div class="relative group">

<button>Services</button>

<div class="absolute hidden group-hover:block bg-white text-black mt-2 rounded shadow">

<a href="#" class="block px-4 py-2 hover:bg-gray-100">
Web Design
</a>

<a href="#" class="block px-4 py-2 hover:bg-gray-100">
Development
</a>

</div>

</div>

<a href="#">Contact</a>

</div>

</div>

</nav>

Footer Layout

A footer usually contains:

company info
navigation links
social media links

Basic Footer Example

<footer class="bg-gray-900 text-white py-8">

<div class="max-w-6xl mx-auto px-4 grid md:grid-cols-3 gap-6">

<div>

<h3 class="font-semibold mb-2">
Company
</h3>

<p class="text-gray-400 text-sm">
Building modern websites with Tailwind CSS.
</p>

</div>

<div>

<h3 class="font-semibold mb-2">
Quick Links
</h3>

<ul class="space-y-1 text-gray-400">

<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>

</ul>

</div>

<div>

<h3 class="font-semibold mb-2">
Follow Us
</h3>

<div class="flex gap-4">

<a href="#">Facebook</a>
<a href="#">Twitter</a>
<a href="#">LinkedIn</a>

</div>

</div>

</div>

</footer>

Footer with Copyright

<footer class="bg-gray-800 text-gray-300 py-6 text-center">

<p>
© 2026 MyWebsite. All rights reserved.
</p>

</footer>

Complete Page Layout Example

<div class="min-h-screen flex flex-col">

<header class="bg-blue-600 text-white p-4">
Navbar
</header>

<main class="flex-grow p-10">
Main Content
</main>

<footer class="bg-gray-900 text-white p-6 text-center">
Footer
</footer>

</div>

This creates a full page layout with header and footer.

Why Navbar & Footer Are Important

Easy Navigation

Users can easily explore the website.

Better User Experience

Consistent layout improves usability.

Responsive Design

Works across mobile and desktop devices.

Branding

Navbar and footer often contain brand identity.

FAQs

What is a navbar?

A navbar is a navigation menu that helps users move between pages on a website.

How do you create a sticky navbar in Tailwind?

Example:

sticky top-0

How do dropdown menus work in Tailwind?

They use group and group-hover.

Example:

group-hover:block

How do you create responsive navigation?

Use Tailwind breakpoints.

Example:

hidden md:flex

What should a footer contain?

Common footer elements include:

company information
quick links
social media
copyright

0 likes

Your Feedback

Help us improve by sharing your thoughts

Previous: Cards and Sections in Tailwind CSS 4 – Card Layout, Profile Cards, Product Cards & Pricing Cards

Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.