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.
Typographic studio navbar built as two stacked rows: a hairline utility row of index-numbered links and an availability indicator, followed by a giant wordmark row pairing the brand name with a primary accent square, a studio meta line, and the call-to-action button.
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/navbar56?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar56?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar56.tsx and the button1 component it uses for the CTA.
The installed file exports navbar56Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar56, navbar56Demo } from "@/components/beste/block/navbar56";
export default function Layout() {
return <Navbar56 {...navbar56Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar56 } from "@/components/beste/block/navbar56";
export default function Layout() {
return (
<Navbar56
brand="Polaris"
metaLabel="Brand & Product Studio — Istanbul"
statusLabel="Booking new projects for Q3"
links={[
{ label: "Work", href: "/work" },
{ label: "Studio", href: "/studio" },
{ label: "Journal", href: "/journal" },
]}
cta={{ label: "Start a Project", href: "/contact" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark text in the giant row; hidden entirely when omitted |
metaLabel | string | – | Small uppercase studio/location line above the CTA in the wordmark row |
statusLabel | string | – | Availability text with a leading dot, shown in the hairline row at md and above |
links | NavLink[] | [] | Index-numbered links in the hairline row (desktop) and mobile menu |
cta | CtaLink | – | Primary button, rendered via button1; hidden when omitted |
className | string | – | Extra classes for the outer <header> |
type NavLink = { label: string; href: string };
type CtaLink = { label: string; href: string };01, 02, … using their array index (String(index + 1).padStart(2, "0")), both in the desktop hairline row and the mobile menu.lg and above; below that, the row collapses to just the statusLabel (from md) and the hamburger.cta in the wordmark row is hidden below the sm breakpoint even when set, reappearing in full width inside the mobile menu instead.open is true), not SSR-hidden like the mega panels in the other navbars in this set.navbar57
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.
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.
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.
navbar77
A sticky, frosted navbar with the serif wordmark in the centre, uppercase letter-spaced links split to either side that underline from the left on hover, a small sliding-marker pill, and a full-height light mobile menu whose links settle in one after another.