A navbar with a dark announcement strip above a hairline-bordered row carrying a lowercase wordmark, uppercase links, a sign-in link, an accent call to action, and a mobile menu.
A navbar with an optional dark announcement strip stacked above a hairline-bordered nav row. The strip carries a short message and a linked call-to-action with a trailing arrow, while the row below holds a lowercase wordmark, uppercase nav links, a plain-text sign-in link, and a solid accent button, with the strip, sign-in link, and menu all collapsing sensibly on mobile.
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/navbar73?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/navbar73?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar73.tsx, the button21 component it uses for its call-to-action, and its dependencies.
The installed file exports navbar73Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar73, navbar73Demo } from "@/components/beste/block/navbar73";
export default function Layout() {
return <Navbar73 {...navbar73Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar73 } from "@/components/beste/block/navbar73";
export default function Layout() {
return (
<Navbar73
announcement={{
text: "Now live for multi-site groups.",
link: { label: "See what's new", href: "/changelog" },
}}
brand="Acme"
items={[
{ label: "Platform", href: "/platform" },
{ label: "Pricing", href: "/pricing" },
]}
signIn={{ label: "Sign in", href: "/login" }}
button={{ label: "Book a demo", href: "/demo" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
announcement | Announcement | – | Dark strip above the nav row; omit to hide the strip entirely |
brand | string | – | Wordmark text, rendered lowercase, linked to https://beste.co |
items | NavLink[] | [] | Nav links in the main row |
signIn | ActionLink | – | Plain-text link shown next to the call-to-action; omit to hide it |
button | ActionLink | – | Accent call-to-action rendered via Button21; omit to hide it |
className | string | – | Extra classes for the outer <header> |
type Announcement = { text: string; link: ActionLink };
type NavLink = { label: string; href: string };
type ActionLink = { label: string; href: string };announcement is passed; it uses inverted bg-foreground/text-background colors regardless of theme, and its link shows a trailing arrow icon.border-b), independent of whether the announcement strip is shown.signIn is desktop-only inline (hidden lg:block) but reappears above the call-to-action inside the open mobile menu.lg) stacks the nav links, then signIn, then a full-width call-to-action button, each in its own row.announcement prop is passed.navbar79
A sticky navbar topped by a thin ink announcement bar with a small-caps link, then a frosted bar with the serif wordmark, uppercase links that underline from the left on hover, a sliding-marker pill, and a light full-height mobile menu whose links settle in one after another.
navbar43
Dark studio navbar with a primary announcement bar, wordmark with tagline divider, uppercase links and a primary seal CTA.
navbar62
Navbar with a dark scrolling announcement bar on top — looping links that pause on hover and fade at the edges — over a clean wordmark row with a pill CTA.
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.