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 header with an inline search field that flexes to fit, collapsing the links to a hamburger.
<!--
The search field is a real <form role="search"> with a labelled <input>, not a
styled div - Enter submits and a screen reader announces the search landmark.
The field flexes with min-w-0 so it never pushes the row past 320px; the link
strip collapses into the hamburger panel below md.
-->
<header class="border-b border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900">
<div class="mx-auto flex h-14 max-w-6xl items-center gap-2 px-4 sm:gap-4">
<a href="/" class="shrink-0 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>
<form role="search" class="relative min-w-0 flex-1 sm:max-w-xs" onsubmit="return false">
<label for="nav-search" class="sr-only">Search</label>
<svg class="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
<input id="nav-search" type="search" name="q" placeholder="Search" class="h-9 w-full rounded-lg border border-gray-300 bg-gray-50 pl-8 pr-3 text-sm text-gray-900 placeholder:text-gray-500 focus-visible:border-blue-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-50 dark:placeholder:text-gray-400" />
</form>
<nav class="hidden items-center gap-1 md:flex" aria-label="Main">
<a href="/pricing" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50">Pricing</a>
<a href="/docs" class="rounded-md px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-50">Docs</a>
</nav>
<button
type="button"
aria-expanded="false"
aria-controls="nav-search-menu"
aria-label="Open main menu"
class="inline-flex h-9 w-9 shrink-0 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>
</div>
<nav id="nav-search-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" aria-label="Main">
<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>
</nav>
</header>| Prop | Type | Default | Description |
|---|---|---|---|
onSearch | (query: string) => void | - | On search |
searchPlaceholder | string | 'Search' | Search placeholder |
className | string | - | Additional classes merged onto the root element. |
The search field is a real `<form role="search">` with a labelled `<input>`, so Enter submits and assistive tech announces the search landmark. `min-w-0 flex-1` lets the field shrink below its content width, so the row never overflows at 320px while the link strip collapses behind the hamburger. Wire `onSearch` to your query handler.