Navbar
Simple Navbar
A logo, an inline link row and a CTA, collapsing to a hamburger menu below the md breakpoint.
#navbar#header#responsive
6 frameworksIntermediate
Loading…
A bar that floats over a hero with white labels, opening a solid, legible panel on mobile.
<!--
A bar that floats over a hero: absolute, no fill, white text. It only works on
a dark image, so the labels ship white and the mobile panel is given its own
solid backdrop-blurred surface - white-on-white links inside an open menu is
the trap this layout invites. Drop the wrapper's bg for your real hero.
-->
<div class="relative isolate min-h-64 bg-gradient-to-br from-gray-900 via-gray-800 to-blue-900">
<header class="absolute inset-x-0 top-0 z-20">
<div class="mx-auto flex h-16 max-w-6xl items-center gap-4 px-4">
<a href="/" class="mr-auto font-bold text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80">Adysre</a>
<nav class="hidden items-center gap-1 md:flex" aria-label="Main">
<a href="/product" class="rounded-md px-3 py-1.5 text-sm font-medium text-white/80 hover:bg-white/10 hover:text-white">Product</a>
<a href="/pricing" class="rounded-md px-3 py-1.5 text-sm font-medium text-white/80 hover:bg-white/10 hover:text-white">Pricing</a>
<a href="/docs" class="rounded-md px-3 py-1.5 text-sm font-medium text-white/80 hover:bg-white/10 hover:text-white">Docs</a>
</nav>
<a href="/signup" class="hidden rounded-lg border border-white/30 bg-white/10 px-3.5 py-1.5 text-sm font-semibold text-white backdrop-blur hover:bg-white/20 md:block">Get started</a>
<button
type="button"
aria-expanded="false"
aria-controls="nav-overlay-menu"
aria-label="Open main menu"
class="inline-flex h-10 w-10 items-center justify-center rounded-md text-white hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 md:hidden"
>
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
</button>
</div>
<nav id="nav-overlay-menu" hidden class="mx-3 mt-1 flex flex-col gap-1 rounded-xl border border-gray-200 bg-white/95 p-2 shadow-lg backdrop-blur md:hidden dark:border-gray-800 dark:bg-gray-900/95" aria-label="Main">
<a href="/product" class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Product</a>
<a href="/pricing" class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Pricing</a>
<a href="/docs" class="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-800">Docs</a>
<a href="/signup" class="mt-1 rounded-lg bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white hover:bg-blue-700">Get started</a>
</nav>
</header>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
ctaLabel | string | 'Get started' | Call-to-action button text. |
ctaHref | string | '/signup' | Destination for the call-to-action link. |
className | string | - | Additional classes merged onto the root element. |
The bar is `absolute inset-x-0 top-0` with no fill and white text, so it only reads over a dark hero - swap the gradient wrapper for your real image. The trap this layout invites is white-on-white links inside the open menu, so the mobile panel is given its own solid, `backdrop-blur` surface. The CTA uses a translucent glass fill that works on any backdrop.