Announcement Bar Navbar

Navbar73: Announcement Bar Navbar

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.

Installation

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.

Quick start

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" }}
    />
  );
}

Props

type Announcement = { text: string; link: ActionLink };
type NavLink = { label: string; href: string };
type ActionLink = { label: string; href: string };

Behavior notes

• The announcement strip only renders when announcement is passed; it uses inverted bg-foreground/text-background colors regardless of theme, and its link shows a trailing arrow icon.
• The nav row itself always has a bottom border (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.
• The mobile menu (below lg) stacks the nav links, then signIn, then a full-width call-to-action button, each in its own row.
• There is no dismiss control on the announcement strip; visibility is controlled entirely by whether the announcement prop is passed.