Navbar — App header with tabs

Breadcrumbs, a project toolbar and page links form an app header, with an account menu that drops below the avatar and a scrollable tab strip on mobile. Use it for signed-in app pages that need global utilities and local navigation.

ReactHTML

1440 × 900

Open in new tab

Component.tsx194 lines

export default function NavbarAppTabs() {
  return (
    <header className="min-h-72 bg-white text-neutral-900">
      <div className="mx-auto max-w-7xl px-6">
        <nav aria-label="Breadcrumb" className="py-3">
          <ol role="list" className="flex flex-wrap items-center gap-2 text-xs text-neutral-500">
            <li>
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Workspace
              </a>
            </li>
            <li aria-hidden="true">/</li>
            <li>
              <a
                href="#"
                className="font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
              >
                Projects
              </a>
            </li>
            <li aria-hidden="true">/</li>
            <li aria-current="page">Current project</li>
          </ol>
        </nav>
        <div className="flex h-14 items-center justify-between gap-3 border-y border-neutral-200">
          <div className="flex min-w-0 items-center gap-3">
            <a
              href="#"
              aria-label="Logo home"
              className="inline-flex shrink-0 items-center gap-2 font-semibold text-neutral-900 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="size-6"
              >
                <rect x="4" y="4" width="16" height="16" rx="3" />
                <path d="M4 12h16M12 4v16" />
              </svg>
              Logo
            </a>
            <p className="max-w-24 truncate text-sm font-medium sm:max-w-64">Project name</p>
            <span className="hidden items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium sm:inline-flex">
              Active
            </span>
          </div>
          <div className="flex shrink-0 items-center gap-1">
            <a
              href="#"
              aria-label="Search workspace"
              className="flex size-10 items-center justify-center rounded-md hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="size-5"
              >
                <circle cx="10.5" cy="10.5" r="6.5" />
                <path d="M16 16l4 4" />
              </svg>
            </a>
            <a
              href="#"
              aria-label="View notifications"
              className="flex size-10 items-center justify-center rounded-md hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              <svg
                aria-hidden="true"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="size-5"
              >
                <path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4" />
              </svg>
            </a>
            <details open className="relative">
              <summary
                aria-label="Account menu for Alex Rivera"
                className="flex size-10 cursor-pointer list-none items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden"
              >
                <span
                  aria-hidden="true"
                  className="flex size-10 items-center justify-center rounded-full bg-neutral-200 text-sm font-medium text-neutral-600"
                >
                  AR
                </span>
              </summary>
              <nav
                aria-label="Account navigation"
                className="absolute right-0 top-full z-10 mt-2 w-48 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg"
              >
                <ul role="list">
                  <li>
                    <a
                      href="#"
                      className="flex min-h-11 items-center rounded-md px-3 text-sm font-medium hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                    >
                      Profile
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="flex min-h-11 items-center rounded-md px-3 text-sm font-medium hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                    >
                      Preferences
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="flex min-h-11 items-center rounded-md px-3 text-sm font-medium hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                    >
                      Sign out
                    </a>
                  </li>
                </ul>
              </nav>
            </details>
          </div>
        </div>
        <nav aria-label="Project navigation" className="pt-2">
          <div
            role="region"
            tabIndex={0}
            aria-label="Scrollable project navigation"
            className="overflow-x-auto py-1 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
          >
            <ul role="list" className="flex min-w-max gap-1 border-b border-neutral-200">
              <li>
                <a
                  href="#"
                  aria-current="page"
                  className="block border-b-2 border-neutral-900 font-semibold px-3 py-4 text-sm hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Overview
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block border-b-2 border-transparent font-medium px-3 py-4 text-sm hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Activity
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block border-b-2 border-transparent font-medium px-3 py-4 text-sm hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Files
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block border-b-2 border-transparent font-medium px-3 py-4 text-sm hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Members
                </a>
              </li>
              <li>
                <a
                  href="#"
                  className="block border-b-2 border-transparent font-medium px-3 py-4 text-sm hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Settings
                </a>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
  )
}

Pattern notes

When to use: Use for app pages with global utilities and local navigation. Choose navbar-links-actions for a public website. Variations: change the current tab, replace project status, or shorten the account menu.
Hierarchy: Read breadcrumbs, 14px project name and badge, then five links. Overview has aria-current and a 2px neutral-900 bottom border. Account summary names Alex Rivera; AR is decorative. Limit project names to 5 words, tabs to 1 word and account links to 2.
Responsive: Below 640px project name truncates at 96px and the badge hides; tabs keep intrinsic widths in an overflow-x-auto strip with vertical space for outlines. At 640px the project name expands to 256px and the badge returns.
Layout: A white header reserves 288px (min-h-72) for the open account panel. Its 1280px max-w-7xl container has 24px side padding. A 12px breadcrumb row has 12px vertical padding; the 56px toolbar puts identity left and three 40px utilities right. The account card is 192px wide, absolute 8px below the avatar, right aligned, with rounded-lg border, shadow-lg and 8px padding. Five tabs have 12px horizontal and 16px vertical padding above a neutral-200 bottom hairline.
States: Text links hover from neutral-900 to neutral-600. Account details starts open with Profile, Preferences and Sign out. Icon controls and account links fill neutral-50 on hover. Current tab uses a border visible in forced colours. The scrolling region is focusable and labelled. Every enabled control has a 2px neutral-900 focus outline offset 2px. There are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Workspace / Projects / Current project                       │
├──────────────────────────────────────────────────────────────┤
│ Logo  Project name [Active]              [Find] [Bell] [AR]  │
│                                          ┌────────────────┐  │
│ Overview Activity Files Members Settings │ Profile        │  │
├──────────────────────────────────────────┤ Preferences    │  │
│                                          │ Sign out       │  │
│                                          └────────────────┘  │
└──────────────────────────────────────────────────────────────┘

View all

Navbar — Announcement, search and categories
Layout tags: stacked,row,form
Navbar — Brand beside stacked navigation
Layout tags: asymmetric,row,compact
Navbar — Brand row and category tiles
Layout tags: grid,icons,compact

Navbar — App header with tabs

Pattern notes

More in Navbar

Navbar — Announcement, search and categories

Navbar — Brand beside stacked navigation

Navbar — Brand row and category tiles