Letterhead-style navbar with a stacked brand block beside stacked rows of location, email and links, closed off by a seal CTA on the right.
Letterhead-style navbar with a bordered brand block (wordmark plus tagline) beside stacked utility and link rows, letting a location label and mailto link sit above the nav links, closed off by a seal call-to-action on the far right. Below lg it collapses into a hamburger-triggered mobile menu that repeats the links, CTA, and location/email footer.
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/navbar52?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar52?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar52.tsx and the button1 component it uses for its call-to-action.
The installed file exports navbar52Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar52, navbar52Demo } from "@/components/beste/block/navbar52";
export default function Layout() {
return <Navbar52 {...navbar52Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar52 } from "@/components/beste/block/navbar52";
export default function Layout() {
return (
<Navbar52
brand="Polaris"
tagline="Brand and Product Studio"
locationLabel="Istanbul / Worldwide"
email="[email protected]"
links={[
{ label: "Work", href: "/work" },
{ label: "Studio", href: "/studio" },
]}
cta={{ label: "Start a Project", href: "/contact" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark shown in the bordered brand block |
tagline | string | – | Uppercase line under the brand, inside the same block |
locationLabel | string | – | Location text in the utility row above the links |
email | string | – | Rendered as a mailto: link in the utility row and the mobile menu footer |
links | NavLink[] | [] | Links row under the utility row on desktop, or listed in the mobile menu |
cta | CtaLink | – | button1 shown at the far right on desktop and full-width in the mobile menu |
className | string | – | Extra classes for the outer <header> |
type NavLink = { label: string; href: string };
type CtaLink = { label: string; href: string };lg) beside a stacked utility row (location, email) and links row, closed off by the CTA on the far right; this whole block is hidden below lg.lg, only the brand block and the hamburger toggle remain visible; the mobile menu is conditionally rendered and repeats the links, a full-width CTA, and the location/email footer.open boolean.