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.
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/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="[email protected]"
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.