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.
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.navbar73
A navbar with a dark announcement strip above a hairline-bordered row carrying a lowercase wordmark, uppercase links, a sign-in link, an accent call to action, and a mobile menu.
navbar74
A navbar contained in a softly rounded, bordered capsule with a lowercase wordmark, uppercase links, an accent call to action, and a matching mobile panel.
navbar71
A light editorial navbar with a lowercase wordmark, soft muted nav pills that reveal hover dropdowns, a solid accent call to action, and a collapsing mobile menu.