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="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.
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.
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.
navbar82
A minimal bar with a wordmark, a sliding-marker pill and a two-line menu toggle that turns into a cross, opening a full-screen ink menu with film grain: numbered oversized serif links settle in one after another on the left, the photograph and description on the right blur to whichever link is hovered, and a ruled foot carries contact details, social links and the pill. The menu is always in the markup and shown with CSS.