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.
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="studio@polaris.co"
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.navbar48
Print-inspired masthead navbar with a giant centered wordmark flanked by studio meta and contact, over a ruled row of spread-out links with an inline seal CTA.
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.
navbar56
Typographic statement navbar — a hairline row of index-numbered links and availability above a giant wordmark with a primary square, studio meta and seal CTA.
navbar51
Two-row navbar with brand, availability status and seal CTA on top, and an underlined active-tab link row that scrolls horizontally on mobile.
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.
navbar67
Poster-scale navbar — an oversized wordmark anchors the left while a right column stacks the nav, a pill CTA and a parenthetical label. Collapses to a stacked mobile menu.