Navbar — Open two-column menu panel

A simple brand row opens into an always-visible panel of large primary links and smaller resource destinations.

ReactHTML

1440 × 900

Component.tsx119 lines

export default function NavbarSplitMenuPanel() {
  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="flex flex-wrap items-center justify-between gap-4">
          <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>
          <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>
        </div>
        <nav
          aria-label="Expanded site navigation"
          className="mt-6 grid gap-8 border-t border-neutral-200 pt-6 md:grid-cols-2"
        >
          <div>
            <p className="text-sm font-medium text-neutral-500">Explore</p>
            <ul role="list" className="mt-4 space-y-4">
              <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 text-lg"
                >
                  Product overview
                </a>
              </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 text-lg"
                >
                  Capabilities
                </a>
              </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 text-lg"
                >
                  Pricing
                </a>
              </li>
            </ul>
          </div>
          <div>
            <p className="text-sm font-medium text-neutral-500">Resources</p>
            <ul role="list" className="mt-4 grid gap-4 sm:grid-cols-2">
              <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 text-sm"
                >
                  Guides
                </a>
                <p className="text-sm text-neutral-600 mt-1">
                  Short destination description.
                </p>
              </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 text-sm"
                >
                  Examples
                </a>
                <p className="text-sm text-neutral-600 mt-1">
                  Short destination description.
                </p>
              </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 text-sm"
                >
                  Support
                </a>
                <p className="text-sm text-neutral-600 mt-1">
                  Short destination description.
                </p>
              </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 text-sm"
                >
                  Updates
                </a>
                <p className="text-sm text-neutral-600 mt-1">
                  Short destination description.
                </p>
              </li>
            </ul>
          </div>
        </nav>
      </div>
    </header>
  )
}

Pattern notes

When to use: Use for a compact site index at a page entrance. Pick a closed dropdown when vertical space is limited. Variations: group links by audience, add a help destination, or put a brief section summary above the large links.
Hierarchy: Three larger primary links read before four smaller resource links and their descriptions. Use primary labels under 3 words and destination descriptions under 8.
Responsive: The panel columns stack below 768px and resource destinations stack below 640px. The brand row wraps. All destinations stay visible at every width.
Layout: A max-w-6xl header holds a brand row and a navigation panel separated by a 1px border and 24px padding. At 768px the panel becomes two equal columns with a 32px gap; resources form a two-column grid from 640px.
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                                            [Contact] │
│                                                          │
│Explore                          Resources                │
│[Product overview]               [Guides]     [Examples]  │
│[Capabilities]                   Description  Description │
│[Pricing]                        [Support]    [Updates]   │
│                                 Description  Description │
└──────────────────────────────────────────────────────────┘

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 — Open two-column menu panel

Pattern notes

More in Navbar

Navbar — Announcement, search and categories

Navbar — App header with tabs

Navbar — Brand beside stacked navigation