Navbar — Floating pill

A rounded navigation pill with four links and one action floats above a quiet section, and its mobile menu opens as a separate two-column card. Use it above a sparse landing page where navigation should float clear of the content.

ReactHTML

1440 × 900

Open in new tab

Component.tsx138 lines

export default function NavbarFloatingPill() {
  return (
    <section className="min-h-72 bg-neutral-50 p-4 text-neutral-900">
      <header className="relative mx-auto flex h-14 max-w-4xl items-center gap-2 rounded-full border border-neutral-200 bg-white px-4 shadow-sm">
        <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="mx-auto hidden items-center gap-6 md:flex">
          <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"
          >
            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"
          >
            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">
          <a
            href="#"
            className="inline-flex h-11 items-center justify-center rounded-full 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 md:hidden">
            <summary
              aria-label="Toggle navigation menu"
              className="flex size-10 cursor-pointer list-none items-center justify-center rounded-full 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-full mt-2 rounded-lg border border-neutral-200 bg-white p-4 shadow-lg"
            >
              <ul role="list" className="grid grid-cols-2 gap-3">
                <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"
                  >
                    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"
                  >
                    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 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>
            </nav>
          </details>
        </div>
      </header>
    </section>
  )
}

Pattern notes

When to use: Use above a sparse landing page where navigation should float clear of the content. Choose navbar-links-actions for a full-width site header. Variations: shorten the link set, use a Contact action, or place the pill over a media placeholder.
Hierarchy: Logo leads, followed by four 14px links and one Get started action. Keep link labels to 1–2 words and the action to 2 words. The rounded-full silhouette and space below distinguish the bar from an ordinary header.
Responsive: Below 768px the four desktop links hide and the native mobile menu appears. At 768px the links return, the mobile menu hides and the same floating section height remains. The menu grid stays two columns at 320px.
Layout: A neutral-50 section reserves 288px (min-h-72), with 16px outer padding. A max-w-4xl 896px white rounded-full bar is 56px tall, has 16px horizontal padding, a neutral-200 border and shadow-sm. The desktop links are centred with 24px gaps. A mobile absolute card begins 8px below the bar, spans its width and has a rounded-lg border, shadow-lg and 16px padding; its four links form two equal columns with 12px gaps above a full-width action.
States: Text links change from neutral-900 to neutral-600 on hover. The primary action has a neutral-900 fill, neutral-700 hover fill, 44px height and a pill radius. The mobile 40px round summary shows bars when closed and a cross when open. The details is initially open. Every enabled control shows a 2px keyboard-focus outline offset 2px. There are no disabled controls.

Desktop wireframe

┌──────────────────────────────────────────────────────────────┐
│       ┌──────────────────────────────────────────────┐       │
│       │ Logo     Four page links       [Get started] │       │
│       └──────────────────────────────────────────────┘       │
│                                                              │
│                   Open space below the pill                  │
└──────────────────────────────────────────────────────────────┘

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 — Floating pill

Pattern notes

More in Navbar

Navbar — Announcement, search and categories

Navbar — App header with tabs

Navbar — Brand beside stacked navigation