Transparent to Solid
Slow trips to the quiet edges of the map
Small groups, local guides and routes you will not find in a brochure.
Small groups, local guides and routes you will not find in a brochure.
A bar that sits transparent with light links over a dark photo hero band and turns into a solid bar with a bottom border once the page scrolls past 24 pixels. The Explore item drops a full-width panel with two captioned photos and two link columns. The phone menu slides down with its items settling in one after another. Every panel stays in the markup and is toggled with CSS.
A bar that sits transparent with light links over a dark photo hero band and turns solid, with a bottom border, as soon as the page scrolls. The Explore item drops a full-width panel with two captioned photos and two link columns; on a phone the menu slides down and its items settle in one after another.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://beste.dev/r/navbar89?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/navbar89?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar89.tsx plus the shadcn button primitive it uses.
The installed file exports navbar89Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar89, navbar89Demo } from "@/components/beste/block/navbar89";
export default function Page() {
return <Navbar89 {...navbar89Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar89 } from "@/components/beste/block/navbar89";
export default function Page() {
return (
<Navbar89
brand="Fieldnote"
mega={{
label: "Explore",
photos: [
{ caption: "Lakes and high trails", href: "/lakes", image: { src: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800&h=600&fit=crop", alt: "A mountain lake" } },
{ caption: "Quiet coastlines", href: "/coast", image: { src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=800&h=600&fit=crop", alt: "An aerial beach" } },
],
columns: [
{ title: "Trips", links: [{ label: "Weekend escapes", href: "/weekends" }, { label: "City breaks", href: "/cities" }] },
{ title: "Plan", links: [{ label: "Route builder", href: "/routes" }] },
],
}}
links={[
{ label: "Stays", href: "/stays" },
{ label: "About", href: "/about" },
]}
button={{ label: "Plan a trip", href: "/plan" }}
labels={{ open: "Open menu", close: "Close menu" }}
/>
);
}Leave hero out in a real page and give your own first section a dark background and -mt-16, so it slides under the transparent bar.
| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark on the left |
mega | Mega | – | The item that opens the photo and link panel |
links | NavItem[] | [] | Plain links beside it |
button | ActionButton | – | Button on the right, repeated at the foot of the mobile menu |
hero | Hero | – | Demo photo band rendered under the bar |
labels | { open?: string; close?: string } | {} | Accessible names for the mobile toggle |
className | string | – | Extra classes for the outer wrapper |
type Mega = {
label: string;
photos: PhotoLink[];
columns: LinkColumn[];
};
type PhotoLink = {
caption: string;
href: string;
image: { src: string; alt: string };
};
type LinkColumn = {
title: string;
links: NavItem[];
};
type Hero = {
heading: string;
description: string;
image: { src: string; alt: string };
};
type NavItem = {
label: string;
href: string;
};
type ActionButton = {
label: string;
href: string;
variant?: "default" | "outline" | "ghost" | "secondary";
};aria-hidden and inert, which keeps their links out of the tab order.window.scrollY passes 24, and checks once on mount so a reload mid-page starts solid. The bar also turns solid while the Explore panel or the mobile menu is open, so their text never sits on the photo.aria-expanded and aria-controls; the panel closes when the pointer leaves the header, when a plain link is hovered, on Escape and on a pointer down outside the header.grid-template-rows transition and each row fades down with a growing transitionDelay; the Explore columns are flattened into the same list. Links inside it close it on click.