Navbar — Logo, links and actions

A logo, five page links, a login link and a primary action share one compact bar, and a native mobile menu keeps the primary action visible. Use it for a landing page with a small primary navigation and a conversion action.

ReactHTML

1440 × 900

Open in new tab

Component.tsx162 lines

export default function NavbarLinksActions() {
  return (
    <header className="min-h-[25rem] border-b border-neutral-200 bg-white text-neutral-900 lg:min-h-0">
      <div className="relative mx-auto max-w-6xl px-6">
        <div className="flex h-16 items-center gap-2">
          <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>
          <nav aria-label="Main navigation" className="ml-8 hidden items-center gap-6 lg:flex">
            <a
              href="#"
              aria-current="page"
              className="text-sm font-semibold 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="text-sm 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="text-sm 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="text-sm 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="text-sm 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 className="ml-auto flex items-center gap-2 sm:gap-4">
            <a
              href="#"
              className="text-sm 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 hidden lg:inline-flex"
            >
              Log in
            </a>
            <a
              href="#"
              className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
            >
              Get started
            </a>
            <details open className="group lg:hidden">
              <summary
                aria-label="Toggle navigation menu"
                className="flex size-10 cursor-pointer list-none items-center justify-center rounded-md border border-neutral-300 hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden"
              >
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="size-5 group-open:hidden"
                >
                  <path d="M4 6h16M4 12h16M4 18h16" />
                </svg>
                <svg
                  aria-hidden="true"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="hidden size-5 group-open:block"
                >
                  <path d="m6 6 12 12M18 6 6 18" />
                </svg>
              </summary>
              <nav
                aria-label="Mobile navigation"
                className="absolute inset-x-0 top-16 border-t border-neutral-200 bg-white p-6"
              >
                <ul role="list">
                  <li>
                    <a
                      href="#"
                      aria-current="page"
                      className="text-sm font-semibold 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 flex min-h-11 items-center"
                    >
                      Product
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-sm 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 flex min-h-11 items-center"
                    >
                      Solutions
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-sm 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 flex min-h-11 items-center"
                    >
                      Pricing
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-sm 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 flex min-h-11 items-center"
                    >
                      Docs
                    </a>
                  </li>
                  <li>
                    <a
                      href="#"
                      className="text-sm 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 flex min-h-11 items-center"
                    >
                      About
                    </a>
                  </li>
                </ul>
                <a
                  href="#"
                  className="mt-4 w-full inline-flex h-11 items-center justify-center rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900"
                >
                  Log in
                </a>
              </nav>
            </details>
          </div>
        </div>
      </div>
    </header>
  )
}

Pattern notes

When to use: Use for a landing page with a small primary navigation and a conversion action. Choose navbar-mega-menu for grouped product destinations. Variations: change the current link, omit login, or replace Get started with Contact.
Hierarchy: Read the 24px glyph and Logo, five 14px navigation labels, then login and Get started. Product is the current page, marked with aria-current and semibold neutral-900. Keep navigation labels to 1–2 words and actions to 2 words.
Responsive: Below 1024px the desktop navigation and login hide; the mobile summary and panel appear. At 1024px the header returns to 64px and the mobile details hides. The primary action remains visible at every width.
Layout: A white header has a neutral-200 bottom hairline. Its max-w-6xl container is 1152px with 24px side padding and a 64px (h-16) flex row. The desktop link row sits 32px after the logo with 24px gaps; login and the primary action sit at the right. A full-width absolute mobile panel begins below the row with 24px padding and five 44px links above a 44px secondary login action. The header reserves 400px total height below 1024px.
States: Text links change from neutral-900 to neutral-600 on hover. The 44px primary action has a 6px radius, neutral-900 fill and neutral-700 hover fill with a 150ms colour transition. The mobile details is open initially; its 40px summary swaps bars for a cross through group-open. Closing it hides the panel while keeping the primary action in the bar. The secondary login action fills neutral-50 on hover. Every enabled control shows a 2px keyboard-focus outline offset 2px. There are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│ Logo    Five page links               Log in [Get started]   │
└──────────────────────────────────────────────────────────────┘

View all

Navbar — Announcement, search and categories
Layout tags: stacked,row,form
Navbar — App header with tabs
Layout tags: stacked,row,compact
Navbar — Brand beside stacked navigation
Layout tags: asymmetric,row,compact

Navbar — Logo, links and actions

Pattern notes

More in Navbar

Navbar — Announcement, search and categories

Navbar — App header with tabs

Navbar — Brand beside stacked navigation