顶部栏与面包屑
构建顶部导航栏，加入搜索输入框、通知铃铛和用户头像下拉菜单，并在其下方添加面包屑组件。
顶部栏与面包屑 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Top Bar Role in a Dashboard
The top bar (or top navigation bar) sits at the top of the main content area, not the sidebar. It provides global actions available on every page: a search input for quick content lookup, notification bell for alerts, and a user avatar that opens a dropdown menu. Keeping these actions in one consistent location reduces cognitive load for users navigating the dashboard.
Top Bar Shell
The top bar is a flex row with flex h-16 items-center justify-between border-b border-gray-200 bg-white px-6. The fixed height h-16 keeps it predictable and matches the sidebar logo row for visual alignment. It lives inside the main content wrapper, not inside the sidebar, so it spans only the main area's width.
<header class="flex h-16 flex-shrink-0 items-center justify-between
border-b border-gray-200 bg-white px-6">
<!-- Left: hamburger (mobile) + breadcrumbs -->
<div class="flex items-center gap-4">
<!-- Mobile hamburger -->
<button class="rounded-md p-1.5 text-gray-600 hover:bg-gray-100 lg:hidden">
<svg class="h-5 w-5"><!-- menu icon --></svg>
</button>
<!-- Breadcrumbs -->
</div>
<!-- Right: search, notifications, avatar -->
<div class="flex items-center gap-3">
<!-- Right controls -->
</div>
</header>Search Input in Top Bar
A search input in the top bar lets users quickly navigate to pages or find records. Keep it compact with a set width like w-64 that expands on focus using a CSS transition. Include a magnifying glass icon inside the input using relative positioning. Add rounded-lg bg-gray-100 text-sm focus:bg-white focus:ring-2 focus:ring-blue-500 for a clean, modern look.
<div class="relative">
<svg class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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-64 rounded-lg bg-gray-100 py-2 pl-9 pr-4 text-sm
transition focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>Notification Bell
The notification bell triggers a dropdown with recent alerts. Display an unread count badge on the icon using absolute positioning: absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs text-white. Wrap both icon and badge in a relative container so the badge positions relative to the icon itself.
<button class="relative rounded-full p-2 text-gray-600 hover:bg-gray-100"
aria-label="Notifications">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159
c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
</svg>
<!-- Unread badge -->
<span class="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center
rounded-full bg-red-500 text-[10px] font-bold text-white">
3
</span>
</button>User Avatar and Dropdown Trigger
The user avatar in the top right opens a dropdown menu with account options. Display the avatar as a small rounded image with a subtle hover ring: h-8 w-8 rounded-full ring-2 ring-gray-200 hover:ring-blue-400 cursor-pointer transition. Alternatively, show initials in a colored circle when no photo is available, using a colored background that derives from the user's name or account color.
<div class="relative">
<!-- Avatar button -->
<button class="flex items-center gap-2 rounded-full"
onclick="toggleUserMenu()">
<img src="/avatar.jpg" alt="Jane Doe"
class="h-8 w-8 rounded-full ring-2 ring-gray-200 transition hover:ring-blue-400">
<svg class="h-4 w-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
</svg>
</button>
<!-- Dropdown menu (toggled) -->
<div class="absolute right-0 mt-2 w-48 rounded-xl bg-white py-2 shadow-lg ring-1 ring-black/5">
<!-- Menu items -->
</div>
</div>Breadcrumbs Overview
Breadcrumbs show the user's current location in the app's page hierarchy. In a dashboard, they typically appear just below the top bar or within the top bar's left side. A breadcrumb like Home / Users / Edit User lets users navigate up the hierarchy with one click. Use a nav element with aria-label='Breadcrumb' for accessibility.
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-2 text-sm">
<li>
<a href="/dashboard" class="text-gray-500 hover:text-gray-900 transition-colors">
Dashboard
</a>
</li>
<li class="text-gray-300">/</li>
<li>
<a href="/users" class="text-gray-500 hover:text-gray-900 transition-colors">
Users
</a>
</li>
<li class="text-gray-300">/</li>
<li class="font-medium text-gray-900">Edit User</li>
</ol>
</nav>Breadcrumbs With Chevron Separators
Replace the slash separator with a small chevron icon for a more refined look. Use a tiny SVG arrow with h-4 w-4 text-gray-400 between breadcrumb items. Wrap each separator in a li with aria-hidden='true' so screen readers skip it and only announce the navigation links and current page.
<ol class="flex items-center gap-1 text-sm">
<li>
<a href="/dashboard" class="font-medium text-gray-500 hover:text-gray-900">Dashboard</a>
</li>
<li aria-hidden="true">
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</li>
<li>
<a href="/settings" class="font-medium text-gray-500 hover:text-gray-900">Settings</a>
</li>
<li aria-hidden="true">
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
</svg>
</li>
<li class="font-semibold text-gray-900" aria-current="page">Profile</li>
</ol>Page Title Below Top Bar
Some dashboards place a page title section just below the top bar, inside the scrollable main content area. This section contains the page heading (h1), a description, and action buttons like Export or Add New. Use flex items-center justify-between mb-6 to align the title on the left and action buttons on the right.
<div class="mb-6 flex items-center justify-between">
<!-- Title -->
<div>
<h1 class="text-xl font-bold text-gray-900">Users</h1>
<p class="mt-1 text-sm text-gray-500">Manage your team members and their permissions.</p>
</div>
<!-- Actions -->
<div class="flex items-center gap-3">
<button class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium
text-gray-700 transition hover:bg-gray-50">
Export
</button>
<button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold
text-white transition hover:bg-blue-700">
Add user
</button>
</div>
</div>Combining Top Bar and Breadcrumbs
A common pattern places breadcrumbs inside the top bar on the left, with search and user controls on the right. This combines navigation context with global actions in a single horizontal strip. Breadcrumbs appear to the right of the mobile hamburger button, and on desktop the sidebar takes up the far left leaving the top bar solely for the main content area controls.
<header class="flex h-16 flex-shrink-0 items-center justify-between
border-b border-gray-200 bg-white px-6">
<!-- Left: hamburger + breadcrumbs -->
<div class="flex items-center gap-3">
<button class="lg:hidden"><!-- hamburger --></button>
<nav aria-label="Breadcrumb">
<ol class="hidden items-center gap-2 text-sm sm:flex">
<li><a href="/" class="text-gray-500 hover:text-gray-900">Home</a></li>
<li class="text-gray-300">/</li>
<li class="font-medium text-gray-900">Settings</li>
</ol>
</nav>
</div>
<!-- Right: search + bell + avatar -->
<div class="flex items-center gap-3"></div>
</header>Tab Navigation Inside Dashboard Pages
Some dashboard pages have sub-sections navigated by tabs below the page title. Build horizontal tabs as a flex row of buttons with an underline active state. The active tab uses border-b-2 border-blue-600 text-blue-600 font-semibold while inactive tabs use border-b-2 border-transparent text-gray-500 hover:text-gray-700 with a transparent bottom border to maintain consistent height.
<div class="border-b border-gray-200">
<nav class="flex gap-8" aria-label="Tabs">
<button class="border-b-2 border-blue-600 pb-3 text-sm font-semibold text-blue-600">
General
</button>
<button class="border-b-2 border-transparent pb-3 text-sm font-medium
text-gray-500 hover:border-gray-300 hover:text-gray-700 transition-colors">
Security
</button>
<button class="border-b-2 border-transparent pb-3 text-sm font-medium
text-gray-500 hover:border-gray-300 hover:text-gray-700 transition-colors">
Notifications
</button>
</nav>
</div>Top Bar on Mobile
On mobile, the top bar simplifies significantly. Hide the search input (or replace it with an icon-only search button) and hide the breadcrumbs. Show only the hamburger button, the page title, and the avatar. Use hidden sm:flex to show the search and hidden md:flex for breadcrumbs, keeping the mobile top bar uncluttered at narrow widths.
<header class="flex h-16 items-center justify-between border-b border-gray-200 bg-white px-4">
<!-- Mobile: hamburger -->
<button class="rounded-md p-1.5 text-gray-600 hover:bg-gray-100 lg:hidden">
<svg class="h-5 w-5"><!-- icon --></svg>
</button>
<!-- Mobile: page title (replaces breadcrumbs) -->
<p class="font-semibold text-gray-900 lg:hidden">Dashboard</p>
<!-- Desktop: search (hidden on mobile) -->
<div class="hidden sm:block"><!-- search input --></div>
<!-- Always: avatar -->
<img src="/avatar.jpg" class="h-8 w-8 rounded-full">
</header>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building a top bar with search, notification bell, and user avatar, creating accessible breadcrumb navigation with chevron separators and aria-current, and adapting the top bar for mobile with hidden elements at small viewports. Next up we add stat cards and KPI widgets to the dashboard.
常见问题解答
「顶部栏与面包屑」课时是免费的吗？
是的 — 「顶部栏与面包屑」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「顶部栏与面包屑」这节课中我会学到什么？
构建顶部导航栏，加入搜索输入框、通知铃铛和用户头像下拉菜单，并在其下方添加面包屑组件。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「顶部栏与面包屑」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。