Navbar — Brand beside stacked navigation

An identity block sits beside two right-aligned rows for utility links and main destinations.

ReactHTML

1440 × 900

Component.tsx95 lines

export default function NavbarBrandUtilityStack() {
  return (
    <header className="border-b border-neutral-200 bg-white text-neutral-900">
      <div className="mx-auto max-w-6xl px-6 py-6">
        <div className="grid gap-6 md:grid-cols-[14rem_minmax(0,1fr)]">
          <div className="space-y-3">
            <a
              href="#"
              aria-label="Logo home"
              className="inline-flex 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="text-sm text-neutral-600">
              One-line identity descriptor.
            </p>
          </div>
          <div className="space-y-5">
            <nav
              aria-label="Utility navigation"
              className="flex flex-wrap justify-start gap-4 border-b border-neutral-200 pb-4 text-sm md:justify-end"
            >
              <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"
              >
                Help
              </a>
              <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"
              >
                Account
              </a>
              <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"
              >
                Contact
              </a>
            </nav>
            <nav
              aria-label="Main navigation"
              className="flex flex-wrap items-center gap-4 text-sm md:justify-end"
            >
              <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"
              >
                Product
              </a>
              <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"
              >
                Solutions
              </a>
              <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"
              >
                Pricing
              </a>
              <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"
              >
                Docs
              </a>
              <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"
              >
                About
              </a>
            </nav>
          </div>
        </div>
      </div>
    </header>
  )
}

Pattern notes

When to use: Use when utility destinations need clear separation from the main route list. Pick a one-row bar for fewer links. Variations: replace account with sign-in, add a language destination, or shorten the identity block.
Hierarchy: The brand and descriptor identify the site; utility links stay above the main destinations. Limit the descriptor to 8 words and link labels to 2.
Responsive: Below 768px the brand precedes the navigation stack. Both navigation rows align left and wrap. Utility and primary roles retain separate labelled nav elements.
Layout: At 768px, a 224px brand column sits beside flexible stacked navigation with a 24px gap. The utility row has a bottom border and 16px lower padding; the primary row follows after 20px. The header uses max-w-6xl and 24px padding.
States: Links and buttons use neutral hover states and a 2px keyboard focus outline offset by 2px. Filled actions lighten from neutral-900 to neutral-700; outlined actions fill neutral-50. Informational regions remain static.

Desktop wireframe

┌────────────────────────────────────────────────────────────┐
│Logo                      [Help] [Account] [Contact]        │
│Identity descriptor                                         │
│                          [Product] [Pricing] [Docs] [About]│
└────────────────────────────────────────────────────────────┘

View all

Navbar — Announcement, search and categories
Layout tags: stacked,row,form
Navbar — App header with tabs
Layout tags: stacked,row,compact
Navbar — Brand row and category tiles
Layout tags: grid,icons,compact

Navbar — Brand beside stacked navigation

Pattern notes

More in Navbar

Navbar — Announcement, search and categories

Navbar — App header with tabs

Navbar — Brand row and category tiles