Typographic navbar where the links are the heroes — a hairline brand row above a full-width spread of giant index-numbered links closed by a primary arrow CTA, always visible with no hamburger.
Typographic navbar with no hamburger and no collapsing state at all: a hairline brand row with an availability indicator and a mailto link sits above a full-width spread of giant index-numbered links, closed by a typographic call-to-action with a primary arrow icon.
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/navbar57?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar57?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar57.tsx and its dependencies.
The installed file exports navbar57Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar57, navbar57Demo } from "@/components/beste/block/navbar57";
export default function Layout() {
return <Navbar57 {...navbar57Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar57 } from "@/components/beste/block/navbar57";
export default function Layout() {
return (
<Navbar57
brand="Polaris"
statusLabel="Booking new projects for Q3"
email="studio@polaris.co"
links={[
{ label: "Work", href: "/work" },
{ label: "Studio", href: "/studio" },
{ label: "Journal", href: "/journal" },
]}
cta={{ label: "Contact", href: "/contact" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark text in the hairline row; hidden entirely when omitted |
statusLabel | string | – | Availability text with a leading dot, shown at md and above |
email | string | – | Contact address rendered as a mailto: link, shown at sm and above |
links | NavLink[] | [] | Giant index-numbered links that make up the main navigation |
cta | CtaLink | – | Closing typographic link with a trailing arrow icon; hidden when omitted |
className | string | – | Extra classes for the outer <header> |
type NavLink = { label: string; href: string };
type CtaLink = { label: string; href: string };<Link> elements always present in the DOM.01, 02, … using their array index, matching the numbering convention used elsewhere in this navbar set.cta is not rendered through button1; it is a same-style typographic link (large bold text plus a lucide-react ArrowRight) that nudges right on hover, keeping it visually consistent with the link list above it.lg and switches to a single baseline-aligned horizontal row, with the CTA pushed to the far end via justify-between, at lg and above.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.
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.
navbar64
A quiet top bar whose menu button opens a full-screen overlay — oversized numbered links with hover arrows, a contact block and social row beneath. Pure Auralis big type.
navbar52
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.
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.
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.