Announcement Navbar

Navbar79: Announcement Navbar

A navbar with an announcement rail above it: an ink strip carrying one line and a link with a lifting arrow, then the frosted bar with the wordmark, links and a pill.

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/navbar79?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/navbar79?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/navbar79.tsx plus the button22 sliding-marker pill it uses.

Quick start

The installed file exports navbar79Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.

import { Navbar79, navbar79Demo } from "@/components/beste/block/navbar79";

export default function Page() {
  return <Navbar79 {...navbar79Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Navbar79 } from "@/components/beste/block/navbar79";

export default function Page() {
  return (
    <Navbar79
      announcement={{
        text: "Evening sessions now run until nine, Monday to Thursday.",
        link: { label: "Reserve one", href: "/evenings" },
      }}
      brand="Altair"
      items={[
        { label: "Ways we work", href: "/work" },
        { label: "Fees", href: "/pricing" },
      ]}
      button={{ label: "First call", href: "/call" }}
      labels={{ open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

type NavItem = {
  label: string;
  href: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The whole header is sticky, announcement included, so the rail travels with the bar rather than scrolling away and leaving the navigation to jump up into its place.
• The mobile overlay is positioned from top-[7.5rem], the height of the rail plus the bar, so it clears both. If you remove the announcement in your own copy of the file, that offset is the one value to change.
• The announcement row wraps with separate row and column gaps, so a long sentence and its link break onto two centred lines on a phone rather than being squeezed.
• Its arrow lifts only under motion-safe:, so the affordance is dropped for reduced motion while the link keeps working.
• The rail is a fixed ink surface, so its text colors are written against background tokens rather than the adaptive ones the bar below uses.
• The mobile menu is always in the markup and toggled with CSS, with an index-based transitionDelay stagger that resets to 0ms on close.
• Only the bar is frosted; the rail is opaque, which keeps the announcement legible over whatever scrolls beneath it.