Status Tier Navbar

Navbar65: Status Tier Navbar

Two-tier navbar with a quiet top strip carrying an availability badge (with its live dot) alongside a row of utility links, sitting above a main row built around an oversized wordmark, a horizontal nav and a pill CTA. The top strip and the mobile toggle both collapse away below the lg breakpoint, leaving a plain wordmark-and-menu-button header on small screens.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar65.tsx, the badge7 and button12 components it uses for the availability badge and CTA pill, and its dependencies.

Quick start

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

import { Navbar65, navbar65Demo } from "@/components/beste/block/navbar65";

export default function Layout() {
  return <Navbar65 {...navbar65Demo} />;
}

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

import { Navbar65 } from "@/components/beste/block/navbar65";

export default function Layout() {
  return (
    <Navbar65
      brand="Auralis"
      badge={{ label: "Available — Spring 2026" }}
      utilityLinks={[
        { label: "Instagram", href: "https://example.com/instagram" },
        { label: "Newsletter", href: "https://example.com/newsletter" },
      ]}
      links={[
        { label: "Work", href: "/work" },
        { label: "Studio", href: "/studio" },
        { label: "Journal", href: "/journal" },
      ]}
      button={{ label: "Say hello", href: "/contact" }}
    />
  );
}

Props

NavLink: { label, href }.

Behavior notes

• The top strip only renders at all if badge or a non-empty utilityLinks is supplied, and only from lg upward; below that breakpoint it disappears entirely rather than reflowing.
• The mobile menu is conditionally rendered (mounted only while open is true), toggled by the menu button which swaps between the Lucide Menu and X icons.
• The mobile panel repeats links, utilityLinks, and button in a stacked layout below a top border; tapping any link or the CTA closes the menu.
• badge and utilityLinks render only in the desktop top strip; on mobile, utilityLinks appears as a wrapped row under the nav links instead.