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 translucent sticky bar that stays blurred over the page and earns a border once you scroll.
<!--
Sticky + translucent, and the border only appears once the page has moved.
At the top of a page the bar and the hero are one surface, so a hairline
there is a seam with nothing on either side of it; the moment content slides
underneath, that same hairline is what stops the bar dissolving into it.
The blur is a progressive enhancement - the background colour is opaque
enough on its own that a browser without backdrop-filter still renders a
legible bar rather than text over content.
-->
<header class="navsticky" data-scrolled="false">
<nav class="navsticky__inner" aria-label="Main">
<a class="navsticky__brand" href="/">Adysre</a>
<ul class="navsticky__links">
<li><a class="navsticky__link" href="/features">Features</a></li>
<li><a class="navsticky__link" href="/pricing">Pricing</a></li>
<li><a class="navsticky__link" href="/blog">Blog</a></li>
</ul>
<a class="navsticky__cta" href="/signup">Get started</a>
</nav>
</header>
<script>
document.querySelectorAll('.navsticky').forEach(function (bar) {
function update() {
bar.dataset.scrolled = String(window.scrollY > 8);
}
update();
// passive: this listener never calls preventDefault, and saying so keeps it
// off the scrolling critical path.
window.addEventListener('scroll', update, { passive: true });
});
</script>| 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. |
At the top of a page the bar and the hero are one surface, so a border there is a seam with nothing on either side of it. The moment content slides underneath, that same hairline is what stops the bar dissolving into it - hence the border appearing at 8px of scroll rather than being painted from the start. State is a `data-scrolled` attribute rather than a toggled class, so the handler writes one value and Tailwind reads it with `data-[scrolled=true]:`. Keep the background alpha at `/75`-`/85`: a prettier, more transparent bar is one whose labels fail 4.5:1 the moment a busy hero scrolls under them. The blur is progressive enhancement - a browser without `backdrop-filter` still gets a legible opaque-enough bar. The row is `min-h-14` with `flex-wrap`, not a fixed height: at 320px the always-visible links wrap under the brand rather than overflowing the viewport.