导航栏
Simple Navbar
A logo, an inline link row and a CTA, collapsing to a hamburger menu below the md breakpoint.
#navbar#header#responsive
6 个框架中级
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 | 类型 | 默认值 | 说明 |
|---|---|---|---|
ctaLabel | string | 'Sign in' | 行动号召按钮的文案。 |
ctaHref | string | '/login' | 行动号召链接的目标地址。 |
className | string | - | 合并到根元素上的额外类名。 |
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.