Barra superiore e breadcrumb
Crei una barra di navigazione superiore con campo di ricerca, campanella delle notifiche e dropdown dell'avatar utente, oltre a un componente breadcrumb sottostante.
Barra superiore e breadcrumb è una lezione Tailwind CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Tailwind CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
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.
Domande Frequenti
La lezione «Barra superiore e breadcrumb» è gratuita?
Sì — il testo completo di «Barra superiore e breadcrumb» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Tailwind CSS Academy, passa a CoddyKit PRO. Il corso Tailwind CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Barra superiore e breadcrumb»?
Crei una barra di navigazione superiore con campo di ricerca, campanella delle notifiche e dropdown dell'avatar utente, oltre a un componente breadcrumb sottostante. Eserciti Tailwind CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Tailwind CSS Academy?
Non è richiesta alcuna esperienza precedente. Tailwind CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Barra superiore e breadcrumb»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Tailwind CSS Academy?
Sì. Ogni lezione Tailwind CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Struttura della dashboard e sidebar
- Barra superiore e breadcrumb
- Card delle statistiche e widget KPI
- Tabella dati e segnaposto per grafici