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.
A navbar built as a floating, fully rounded pill "island" resting on a muted band: the wordmark, quiet links, and a pill CTA all live inside the rounded bar rather than a full-width strip. Opening the mobile menu drops a separate rounded card below the pill instead of expanding the bar itself.
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/navbar63?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar63?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar63.tsx, the button12 component it uses for its CTA, and its dependencies.
The installed file exports navbar63Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar63, navbar63Demo } from "@/components/beste/block/navbar63";
export default function Layout() {
return <Navbar63 {...navbar63Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar63 } from "@/components/beste/block/navbar63";
export default function Layout() {
return (
<Navbar63
brand="Northwind"
links={[
{ label: "Work", href: "/work" },
{ label: "Studio", href: "/studio" },
{ label: "Journal", href: "/journal" },
]}
button={{ label: "Get in touch", href: "/contact" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark text; omitted entirely when not set |
links | NavLink[] | [] | Desktop and mobile nav links |
button | { label: string; href: string } | – | Pill CTA next to the links; hidden entirely when not set |
className | string | – | Extra classes for the outer <header> |
NavLink: { label, href }.
<nav> itself is the rounded-full pill (rounded-full border bg-background shadow-sm) sitting inside a bg-muted padded band, not a full-width bar.rounded-md border card that appears below the pill (mt-3) rather than a panel attached to or replacing the bar.useState toggle with no outside-click or Escape handling.links are single-level only.navbar37
Centered floating navbar with rounded pill shape, backdrop blur effect, and compact layout. Perfect for modern landing pages and portfolios wanting a minimal floating navigation style.
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.
navbar71
A light editorial navbar with a lowercase wordmark, soft muted nav pills that reveal hover dropdowns, a solid accent call to action, and a collapsing mobile menu.
navbar50
Detached floating navbar card with a square-mark wordmark, uppercase links and a compact seal CTA — the mobile menu unfolds inside the card.