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…
Links sit in a rounded pill track with a raised active pill, collapsing to a stacked list.
<!--
The links live inside a rounded pill track; the active one is a filled pill
marked with aria-current so the highlight and the announced state share one
source. The track collapses to a stacked hamburger panel below md.
-->
<header class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<nav class="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4" aria-label="Main">
<a href="/" class="mr-auto font-bold text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:text-gray-50 dark:focus-visible:ring-blue-400">Adysre</a>
<ul class="hidden items-center gap-1 rounded-full bg-gray-100 p-1 md:flex dark:bg-gray-800">
<li><a href="/product" aria-current="page" class="block rounded-full bg-white px-3.5 py-1.5 text-sm font-medium text-gray-900 shadow-sm dark:bg-gray-950 dark:text-gray-50">Product</a></li>
<li><a href="/pricing" class="block rounded-full px-3.5 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50">Pricing</a></li>
<li><a href="/docs" class="block rounded-full px-3.5 py-1.5 text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50">Docs</a></li>
</ul>
<a href="/login" class="hidden rounded-full bg-gray-900 px-4 py-1.5 text-sm font-semibold text-white hover:bg-gray-700 md:block dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-200">Sign in</a>
<button
type="button"
aria-expanded="false"
aria-controls="nav-pill-menu"
aria-label="Open main menu"
class="inline-flex h-9 w-9 items-center justify-center rounded-md text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 md:hidden dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-blue-400"
>
<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>
</nav>
<ul id="nav-pill-menu" hidden class="flex flex-col gap-1 border-t border-gray-200 px-4 pb-4 pt-2 md:hidden dark:border-gray-800">
<li><a href="/product" aria-current="page" class="block rounded-lg bg-gray-100 px-3 py-2 text-sm font-medium text-gray-900 dark:bg-gray-800 dark:text-gray-50">Product</a></li>
<li><a href="/pricing" class="block rounded-lg 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></li>
<li><a href="/docs" class="block rounded-lg 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></li>
<li><a href="/login" class="block rounded-full bg-gray-900 px-3 py-2 text-center text-sm font-semibold text-white hover:bg-gray-700 dark:bg-gray-50 dark:text-gray-900">Sign in</a></li>
</ul>
</header>| Prop | Type | Default | Description |
|---|---|---|---|
ctaLabel | string | 'Sign in' | Call-to-action button text. |
ctaHref | string | '/login' | Destination for the call-to-action link. |
className | string | - | Additional classes merged onto the root element. |
The links live inside a rounded `bg-gray-100` track styled like a segmented control; the active link is the raised white pill and is marked with `aria-current="page"`, so the highlight and the announced state share one source of truth. Below `md` the track becomes a plain stacked hamburger list. Set `current` per link from your router.