Top Bar and Breadcrumbs
Build a top navigation bar with a search input, notification bell, and user avatar dropdown, plus a breadcrumb component beneath it.
Top Bar and Breadcrumbs is a free Tailwind CSS Academy lesson on CoddyKit — lesson 2 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.
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.
Frequently asked questions
Is the “Top Bar and Breadcrumbs” lesson free?
Yes — the full text of “Top Bar and Breadcrumbs” 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 “Top Bar and Breadcrumbs”?
Build a top navigation bar with a search input, notification bell, and user avatar dropdown, plus a breadcrumb component beneath it. 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 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Top Bar and Breadcrumbs” 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
- Dashboard Shell and Sidebar
- Top Bar and Breadcrumbs
- Stat Cards and KPI Widgets
- Data Table and Chart Placeholders