Building a Responsive Navbar
Create a horizontal navbar with logo, links, and CTA that collapses into a hamburger menu on mobile using hidden and flex responsive utilities.
Building a Responsive Navbar is a free Tailwind CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Anatomy of a Navbar
A navigation bar (navbar) sits at the top of a page and typically contains a logo on the left, navigation links in the center or right, and a call-to-action button at the far right. On mobile, the links collapse into a hamburger menu to save space.
The navbar shell uses flex items-center justify-between to distribute these three zones horizontally, with px-6 py-4 for comfortable padding.
<nav class="flex items-center justify-between px-6 py-4 bg-white shadow-sm">
<!-- Logo -->
<a href="/" class="text-xl font-bold text-blue-600">Brand</a>
<!-- Nav links (hidden on mobile) -->
<div class="hidden md:flex items-center gap-6">...</div>
<!-- CTA -->
<button class="hidden md:block px-4 py-2 bg-blue-600 text-white rounded-lg">Sign Up</button>
</nav>Logo and Brand Area
The logo area is typically an anchor tag wrapping either an SVG logo or a text-based brand name. Use flex items-center gap-2 if combining an icon and text, so they align vertically.
Keep the logo font bold and use your brand's primary color: font-bold text-xl text-blue-600. Make the anchor keyboard-focusable with a focus:outline-none focus-visible:ring-2 focus style.
<a href="/" class="flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded">
<svg class="w-7 h-7 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
</svg>
<span class="text-xl font-bold text-gray-900">Launchpad</span>
</a>Desktop Navigation Links
The desktop nav links sit inside a hidden md:flex items-center gap-6 wrapper — invisible on small screens and displayed as a flex row on medium screens and above. Each link uses text-sm font-medium text-gray-600 hover:text-gray-900 for a subtle default style that darkens on hover.
Add transition-colors duration-150 for a smooth color change on hover, and use a different text color or underline to indicate the currently active page.
<div class="hidden md:flex items-center gap-6">
<a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Features</a>
<a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Pricing</a>
<a href="/blog" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">Blog</a>
<a href="/about" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">About</a>
</div>Desktop CTA and Login Button
The right side of the navbar typically holds a ghost Sign in link and a solid Sign up button. Wrapping them in hidden md:flex items-center gap-3 keeps them hidden on mobile and aligned on desktop.
Using both buttons together creates a clear hierarchy: the ghost link for returning users and the solid button for new user acquisition.
<div class="hidden md:flex items-center gap-3">
<a href="/login" class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
Sign in
</a>
<a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">
Get Started
</a>
</div>Hamburger Menu Button
On mobile, a hamburger button replaces the desktop links. Show it only on small screens with md:hidden and give it an accessible aria-label="Open menu" attribute.
The button renders three horizontal lines (a classic hamburger icon) using an SVG. When clicked, JavaScript toggles a class to reveal the mobile menu panel. The button itself uses p-2 text-gray-600 hover:bg-gray-100 rounded-md for a comfortable tap area.
<button
id="menu-btn"
aria-label="Open menu"
class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
onclick="document.getElementById('mobile-menu').classList.toggle('hidden')">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>Mobile Menu Panel
The mobile menu is a full-width panel that appears below the navbar when the hamburger button is pressed. It is hidden by default with the hidden class, which JavaScript removes when the button is clicked.
Stack the links vertically with flex flex-col gap-1 px-4 pb-4 and give each link block py-2 text-base font-medium for a large, thumb-friendly tap target.
<div id="mobile-menu" class="hidden md:hidden bg-white border-t border-gray-100">
<div class="flex flex-col gap-1 px-4 pb-4 pt-2">
<a href="/features" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Features</a>
<a href="/pricing" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Pricing</a>
<a href="/blog" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">Blog</a>
<a href="/about" class="block py-2 text-base font-medium text-gray-700 hover:text-gray-900">About</a>
<a href="/signup" class="mt-2 block py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">
Get Started
</a>
</div>
</div>Putting the Full Navbar Together
Assemble all parts into a single <nav> element. The structure is: wrapper nav with shadow, then inside it a max-width container with three zones — logo, desktop links, and desktop CTA — followed by the full-width mobile menu panel outside the container.
The max-w-7xl mx-auto inner wrapper prevents the navbar content from stretching too wide on large monitors while letting the background extend edge to edge.
<nav class="bg-white shadow-sm">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="/" class="text-xl font-bold text-blue-600">Brand</a>
<div class="hidden md:flex items-center gap-6">
<a href="/features" class="text-sm font-medium text-gray-600 hover:text-gray-900">Features</a>
<a href="/pricing" class="text-sm font-medium text-gray-600 hover:text-gray-900">Pricing</a>
</div>
<div class="hidden md:flex items-center gap-3">
<a href="/login" class="text-sm text-gray-600">Sign in</a>
<a href="/signup" class="px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
</div>
<button class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-md"
onclick="document.getElementById('mob').classList.toggle('hidden')">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
</button>
</div>
<div id="mob" class="hidden md:hidden px-6 pb-4 flex flex-col gap-1">
<a href="/features" class="py-2 text-base font-medium text-gray-700">Features</a>
<a href="/pricing" class="py-2 text-base font-medium text-gray-700">Pricing</a>
<a href="/signup" class="mt-2 py-2 px-4 text-center text-base font-semibold text-white bg-blue-600 rounded-lg">Get Started</a>
</div>
</nav>Active Link Indicator
An active link indicator shows users which page they are currently on. A common pattern is to use a bottom border or text color change. Apply text-blue-600 border-b-2 border-blue-600 pb-0.5 to the active link so it stands out from the gray links.
In server-rendered apps, add the active classes conditionally on the server. In JS frameworks, compare the current route to the link href and apply the classes programmatically.
<div class="hidden md:flex items-center gap-6">
<!-- Active link -->
<a href="/features"
class="text-sm font-medium text-blue-600 border-b-2 border-blue-600 pb-0.5">
Features
</a>
<!-- Inactive links -->
<a href="/pricing"
class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
Pricing
</a>
<a href="/blog"
class="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors">
Blog
</a>
</div>Navbar With Search Input
Adding a search field to the navbar is a common requirement for content-heavy sites. Place the search input in the center of the navbar using flex-1 max-w-md mx-8 to give it flexible width while keeping it proportional.
Style the input with w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 for a clean search bar with a focus ring.
<div class="flex-1 max-w-md mx-8">
<div class="relative">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0"/>
</svg>
<input
type="search"
placeholder="Search..."
class="w-full pl-10 pr-4 py-2 text-sm border border-gray-300 rounded-full
bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
</div>Dropdown Nav Item
A dropdown navigation item reveals a submenu when hovered or clicked. Use the group utility on the parent link and group-hover:block on the initially hidden submenu to implement a pure CSS hover dropdown.
Position the dropdown with absolute top-full left-0 mt-1 to place it just below the parent link. Add min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 to give it a proper panel appearance.
<div class="relative group">
<button class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-gray-900">
Products
<svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<div class="hidden group-hover:block absolute top-full left-0 mt-1 min-w-48 bg-white rounded-xl shadow-lg border border-gray-100 py-1">
<a href="/analytics" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Analytics</a>
<a href="/reporting" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Reporting</a>
<a href="/export" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50">Export</a>
</div>
</div>Dark Navbar Variant
A dark navbar uses a dark background like bg-gray-900 with light text. Switch text-gray-600 to text-gray-300 for links, hover:text-white for hover states, and adjust the button to bg-blue-500 since it needs to stand out against the dark background.
Dark navbars are popular for developer tools, SaaS dashboards, and any product targeting a technical audience.
<nav class="bg-gray-900 shadow-lg">
<div class="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="/" class="text-xl font-bold text-white">DevTool</a>
<div class="hidden md:flex items-center gap-6">
<a href="/docs" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Docs</a>
<a href="/api" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">API</a>
<a href="/pricing" class="text-sm font-medium text-gray-300 hover:text-white transition-colors">Pricing</a>
</div>
<a href="/dashboard" class="px-4 py-2 text-sm font-semibold text-white bg-blue-500 rounded-lg hover:bg-blue-400">
Dashboard
</a>
</div>
</nav>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: responsive navbar structure with a three-zone flex layout (logo, links, CTA); hamburger button and mobile menu panel toggled with JavaScript and hidden on desktop using md:hidden; and desktop link visibility controlled with hidden md:flex so links collapse on mobile and expand on larger screens. Next up we make navigation sticky and fixed.
Frequently asked questions
Is the “Building a Responsive Navbar” lesson free?
Yes — the full text of “Building a Responsive Navbar” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Building a Responsive Navbar”?
Create a horizontal navbar with logo, links, and CTA that collapses into a hamburger menu on mobile using hidden and flex responsive utilities. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Building a Responsive Navbar” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Building a Responsive Navbar
- Sticky and Fixed Navigation
- Vertical Sidebar Layout
- Collapsible Mobile Sidebar