Detached floating navbar card with a square-mark wordmark, uppercase links and a compact seal CTA — the mobile menu unfolds inside the card.
Navbar rendered as a detached, bordered, rounded card floating over the page rather than a full-width bar, holding a square-mark wordmark, uppercase links, and a compact seal call-to-action. Below lg the mobile menu unfolds inside the same card instead of overlaying the page.
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/navbar50?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar50?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar50.tsx and the button1 component it uses for its call-to-action.
The installed file exports navbar50Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar50, navbar50Demo } from "@/components/beste/block/navbar50";
export default function Layout() {
return <Navbar50 {...navbar50Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar50 } from "@/components/beste/block/navbar50";
export default function Layout() {
return (
<Navbar50
brand="Polaris"
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 shown at the left of the floating card |
links | NavLink[] | [] | Desktop nav links, hidden below lg; the desktop row is skipped entirely if empty |
cta | CtaLink | – | button1 call-to-action, hidden below sm on desktop and duplicated full-width in the mobile menu |
className | string | – | Extra classes for the outer <header> (the floating card itself keeps its own max-w-5xl wrapper) |
type NavLink = { label: string; href: string };
type CtaLink = { label: string; href: string };max-w-5xl) rather than a full-width bar; page padding surrounds it on all sides.links.length > 0.sm on desktop and reappears full-width inside the mobile menu, so it is never shown twice at once.border-t inside the card), not a full-viewport overlay.navbar63
A floating rounded-full navbar island resting on a muted band — wordmark, quiet links and a pill CTA, with a rounded mobile menu card that drops below.
navbar74
A navbar contained in a softly rounded, bordered capsule with a lowercase wordmark, uppercase links, an accent call to action, and a matching mobile panel.
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.
navbar61
Navbar with a marked wordmark and a pill-highlighted trigger that drops a floating rounded mega panel — a parenthetical label over a 3x2 grid of icon use-case cards. Sign-in pill plus a primary CTA.