Tailwind CSS Academy · Lesson

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 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>

All lessons in this course

← Back to Tailwind CSS Academy