构建响应式导航栏
创建包含徽标、链接和 CTA 的水平导航栏，并使用 hidden 和 Flex 响应式实用程序在移动端折叠为汉堡菜单。
构建响应式导航栏 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
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.
常见问题解答
「构建响应式导航栏」课时是免费的吗？
是的 — 「构建响应式导航栏」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「构建响应式导航栏」这节课中我会学到什么？
创建包含徽标、链接和 CTA 的水平导航栏，并使用 hidden 和 Flex 响应式实用程序在移动端折叠为汉堡菜单。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「构建响应式导航栏」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。