Logo left, links centred and a ghost plus solid pair of buttons on the right. The Product item drops a full-width panel of three link columns, each link an icon square with a title and a one-line description, closed by a muted promo band with an arrow link. The phone menu slides down as an accordion. Every panel stays in the markup and is toggled with CSS.
A sticky bar with the logo on the left, links in the centre and a ghost plus solid button pair on the right. The Product item drops a full-width panel of three link columns, each link an icon square with a title and a one-line description, closed by a promo band with an arrow link; on a phone the same links live in a slide-down accordion.
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/navbar83?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/navbar83?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar83.tsx plus the shadcn button primitive it uses.
The installed file exports navbar83Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar83, navbar83Demo } from "@/components/beste/block/navbar83";
export default function Page() {
return <Navbar83 {...navbar83Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar83 } from "@/components/beste/block/navbar83";
export default function Page() {
return (
<Navbar83
brand="Lumen"
mega={{
label: "Product",
columns: [
{
title: "Build",
links: [
{ icon: "layers", title: "Pages", description: "Compose pages from ready sections.", href: "/pages" },
{ icon: "plug", title: "Integrations", description: "Connect the apps you already use.", href: "/integrations" },
],
},
{
title: "Grow",
links: [{ icon: "chart", title: "Analytics", description: "See what visitors do.", href: "/analytics" }],
},
],
promo: { text: "New: scheduled publishing is out.", linkLabel: "Read the changelog", href: "/changelog" },
}}
links={[
{ label: "Pricing", href: "/pricing" },
{ label: "Docs", href: "/docs" },
]}
actions={[
{ label: "Sign in", href: "/login", variant: "ghost" },
{ label: "Start free", 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 three-column panel |
links | NavItem[] | [] | Plain links beside it |
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: ProductColumn[];
promo: { text: string; linkLabel: string; href: string };
};
type ProductColumn = {
title: string;
links: ProductLink[];
};
type ProductLink = {
icon: IconName;
title: string;
description: string;
href: string;
};
type IconName = "layers" | "zap" | "lock" | "plug" | "chart" | "users" | "workflow" | "sparkles";
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.aria-expanded and aria-controls pointing at the panel; the panel closes when the pointer leaves the header, on Escape and on a pointer down outside the header.grid-template-rows transition from 0fr to 1fr; the Product group inside it is a second accordion built the same way, with the columns flattened into one list.actions repeat at its foot.