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 left, wordmark dead centre, actions right - a three-column editorial header.
<!--
Three columns, not a flex row with auto margins. The logo is centred against
the *page*, not against whatever space the two link groups happen to leave -
a 1fr/auto/1fr grid is the only layout that keeps it centred when "Sign in"
becomes "Create free account" and the right column grows.
The logo is inside the nav but is not a nav link; it goes home, so it sits
outside the <ul>.
-->
<header class="navcentre">
<nav class="navcentre__inner" aria-label="Main">
<ul class="navcentre__group navcentre__group--start">
<li><a class="navcentre__link" href="/product" aria-current="page">Product</a></li>
<li><a class="navcentre__link" href="/pricing">Pricing</a></li>
</ul>
<a class="navcentre__brand" href="/">ADYSRE</a>
<div class="navcentre__group navcentre__group--end">
<a class="navcentre__link" href="/support">Support</a>
<a class="navcentre__cta" href="/login">Sign in</a>
</div>
</nav>
</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 layout is `grid-cols-[1fr_auto_1fr]`, and that is the whole trick. With flex and `justify-between` the logo drifts off-centre the moment the two side groups differ in width - which they always do, the second "Sign in" becomes "Create free account". Equal 1fr rails pin the middle column to the centre of the *page* regardless of what flanks it. Below `sm` the left group drops out and the wordmark stays centred on its own. Stateless: no `use client`, no JavaScript, it renders as a Server Component.