A dark translucent bar with a blurred backdrop, muted light links and a light solid button. The Solutions item drops a dark full-width panel with two columns of described links and a large light CTA tile, and the phone menu opens a dark full-screen layer of huge links that locks page scroll. Every panel stays in the markup and is toggled with CSS.
A sticky dark bar in bg-foreground/85 with a blurred backdrop, muted light links and a light solid button. The Solutions item drops a dark full-width panel with two columns of described links and a large light CTA tile; on a phone the menu opens a dark full-screen layer with huge links.
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/navbar99?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/navbar99?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar99.tsx plus the shadcn button primitive it uses.
The installed file exports navbar99Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar99, navbar99Demo } from "@/components/beste/block/navbar99";
export default function Page() {
return <Navbar99 {...navbar99Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar99 } from "@/components/beste/block/navbar99";
export default function Page() {
return (
<Navbar99
brand="Kestrel"
mega={{
label: "Solutions",
columns: [
{
title: "By team",
links: [
{ title: "Engineering", description: "Ship changes with review built in.", href: "/engineering" },
{ title: "Security", description: "Policies and audits in one place.", href: "/security" },
],
},
{
title: "By stage",
links: [{ title: "Startups", description: "Credits for your first year.", href: "/startups" }],
},
],
tile: {
heading: "Move a workload in one afternoon",
description: "Bring one service over with an engineer on a call.",
button: { label: "Book a call", href: "/migrate" },
},
}}
links={[
{ label: "Pricing", href: "/pricing" },
{ label: "Docs", href: "/docs" },
]}
actions={[
{ label: "Sign in", href: "/login", variant: "ghost" },
{ label: "Start building", href: "/signup" },
]}
labels={{ open: "Open menu", close: "Close menu" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark on the left |
mega | Mega | – | The item that opens the dark solutions panel |
links | NavItem[] | [] | Plain links beside it, shown huge in the mobile menu |
actions | ActionButton[] | [] | Buttons on the right, repeated at the foot of the mobile menu |
labels | { open?: string; close?: string } | {} | Accessible names for the mobile toggle |
className | string | – | Extra classes for the outer <header> |
type Mega = {
label: string;
columns: SolutionColumn[];
tile?: CtaTile;
};
type SolutionColumn = {
title: string;
links: SolutionLink[];
};
type SolutionLink = {
title: string;
description: string;
href: string;
};
type CtaTile = {
heading: string;
description: string;
button: { label: string; href: string };
};
type NavItem = {
label: string;
href: string;
};
type ActionButton = {
label: string;
href: string;
variant?: "solid" | "ghost";
};aria-hidden and inert.solid is a light bg-background button and ghost is light text with a faint hover fill. The default is solid.aria-expanded and aria-controls; the panel closes when the pointer leaves the header, on Escape and on a pointer down outside.top-16 to the bottom of the viewport, locks body scroll while open and fades its huge links in one after another; the solutions links follow in a two-column list.