A minimal navbar with a lowercase wordmark, absolutely centered uppercase text links, an accent call to action, and a collapsing mobile menu.
A minimal navbar that keeps the wordmark and call-to-action pinned to the edges while the link list is absolutely positioned and centered on the row independent of their widths, so the links stay dead-center even when the brand name or button label changes length. Below the lg breakpoint the centered row collapses into a toggled stacked menu.
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://ui.beste.co/r/navbar72?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar72?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar72.tsx, the button21 component it uses for its call-to-action, and its dependencies.
The installed file exports navbar72Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar72, navbar72Demo } from "@/components/beste/block/navbar72";
export default function Layout() {
return <Navbar72 {...navbar72Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar72 } from "@/components/beste/block/navbar72";
export default function Layout() {
return (
<Navbar72
brand="Acme"
items={[
{ label: "Platform", href: "/platform" },
{ label: "Pricing", href: "/pricing" },
{ label: "Company", href: "/company" },
]}
button={{ label: "Book a demo", href: "/demo" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark text, rendered lowercase, linked to https://beste.co |
items | NavLink[] | [] | Nav links, rendered centered on the row |
button | ActionLink | – | Accent call-to-action rendered via Button21; omit to hide it |
className | string | – | Extra classes for the outer <header> |
type NavLink = { label: string; href: string };
type ActionLink = { label: string; href: string };absolute left-1/2 -translate-x-1/2 inside a relative nav, so it stays visually centered regardless of the width of the brand or the call-to-action next to it.items is a flat, single-level link.lg) replaces the centered row with a vertical stack of the same links, followed by a full-width call-to-action button when button is set.text-muted-foreground with a hover:text-foreground transition; nothing is marked as an active/current route.navbar44
Symmetric navbar with links on the left, a square-mark wordmark centered and a seal CTA on the right, plus a tile-grid mobile menu.
navbar77
A sticky, frosted navbar with the serif wordmark in the centre, uppercase letter-spaced links split to either side that underline from the left on hover, a small sliding-marker pill, and a full-height light mobile menu whose links settle in one after another.
navbar30
Symmetrical navbar with centered logo flanked by navigation links on both sides and dropdown menus. Perfect for fashion brands and lifestyle sites wanting balanced visual hierarchy.
navbar58
Minimal stacked navbar — a large primary logo square with the wordmark tucked into its corner, over a quiet ruled row of uppercase links. No buttons, no hamburger.