Classic Navbar

Navbar78: Classic Navbar

The classic arrangement: wordmark left, small-caps links centre, then a quiet text link and a pill, with a light full-screen menu on a phone that repeats both actions at its foot.

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

Base UI flavor

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

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

Quick start

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

import { Navbar78, navbar78Demo } from "@/components/beste/block/navbar78";

export default function Page() {
  return <Navbar78 {...navbar78Demo} />;
}

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

import { Navbar78 } from "@/components/beste/block/navbar78";

export default function Page() {
  return (
    <Navbar78
      brand="Altair"
      items={[
        { label: "Therapy", href: "/therapy" },
        { label: "Coaching", href: "/coaching" },
        { label: "Fees", href: "/pricing" },
      ]}
      link={{ label: "Sign in", href: "/sign-in" }}
      button={{ label: "Book a 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

• link is kept separate from items on purpose: a sign-in is not a section of the site, and putting it in the nav list would give it the same weight as the pages.
• Both the quiet link and the pill are repeated at the foot of the mobile menu, so nothing that is reachable on a desktop is missing on a phone.
• The mobile menu is always in the markup and toggled with CSS, so every link is in the server-rendered HTML rather than appearing only once the menu is opened.
• Its items stagger through inline transitionDelay values from the index, reset to 0ms on close so the menu collapses at once instead of unwinding.
• Unlike the ink overlay used elsewhere in this family, this menu stays on the page background, so the block drops into a light site without a colour change at the top.
• The underline under each link is a scaled span with a left origin, so it draws in rather than fading, and it is aria-hidden.
• The overlay starts at top-20, exactly the bar's height, so the wordmark and the close button stay in place while it is open.