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.
Minimal stacked navbar with no call-to-action and no hamburger: a large primary-colored square logo with the wordmark tucked into its bottom corner, centered above a quiet ruled row of uppercase links.
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/navbar58?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar58?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar58.tsx and its dependencies.
The installed file exports navbar58Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar58, navbar58Demo } from "@/components/beste/block/navbar58";
export default function Layout() {
return <Navbar58 {...navbar58Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar58 } from "@/components/beste/block/navbar58";
export default function Layout() {
return (
<Navbar58
brand="Polaris"
links={[
{ label: "Work", href: "/work" },
{ label: "Studio", href: "/studio" },
{ label: "Contact", href: "/contact" },
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark text tucked into the corner of the primary logo square; the whole square is hidden entirely when omitted |
links | NavLink[] | [] | Centered uppercase links in the ruled row below the logo; the row is hidden entirely when the array is empty |
className | string | – | Extra classes for the outer <header> |
NavLink: { label, href }.
useState at all, and every link is a plain always-visible <Link>.size-24 (md:size-28) bg-primary block with the brand text bottom-aligned via items-end, using text-primary-foreground so it stays legible against the primary fill regardless of theme.flex-wrap) on narrow viewports rather than collapsing into a drawer, so an unusually long links array degrades to multiple centered lines instead of overflowing.brand and links can be supplied separately, and either section disappears cleanly if its prop is left out.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.
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.
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.
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.