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.
A navbar rendered as a floating, softly rounded capsule: a bordered, shadowed bg-card bar inset from the page edges rather than a full-width bar, holding a lowercase wordmark, uppercase nav links, and an accent call-to-action. The mobile menu opens as a second matching rounded card directly beneath the capsule.
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/navbar74?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar74?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar74.tsx, the button21 component it uses for its call-to-action, and its dependencies.
The installed file exports navbar74Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar74, navbar74Demo } from "@/components/beste/block/navbar74";
export default function Layout() {
return <Navbar74 {...navbar74Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar74 } from "@/components/beste/block/navbar74";
export default function Layout() {
return (
<Navbar74
brand="Acme"
items={[
{ label: "Product", href: "/product" },
{ label: "Pricing", href: "/pricing" },
{ label: "Docs", href: "/docs" },
]}
button={{ label: "Get started", href: "/signup" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark text, rendered lowercase, linked to https://beste.co |
items | NavLink[] | [] | Nav links inside the capsule |
button | ActionLink | – | Accent call-to-action rendered via Button21; omit to hide it |
className | string | – | Extra classes for the outer <header> |
type NavLink = { label: string; href: string };
type ActionLink = { label: string; href: string };rounded-md border bg-card capsule with a shadow, inset from the page edges by the <header>'s own padding, rather than spanning edge-to-edge like a typical navbar.bg-card/text-card-foreground fixed surface tokens, its text stays legible on the card surface even if the surrounding page background differs.lg) is not an overlay: it renders as a second rounded-md border bg-card panel stacked directly below the capsule, matching its styling.items is a flat, single-level link.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.
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.
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.
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.