Centred Wordmark Navbar

Navbar77: Centred Wordmark Navbar

A centred wordmark navbar: links split either side of the brand on a three-column grid, a pill at the right end, and a light full-screen menu on a phone that merges both link sets in order.

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

Base UI flavor

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

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

Quick start

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

import { Navbar77, navbar77Demo } from "@/components/beste/block/navbar77";

export default function Page() {
  return <Navbar77 {...navbar77Demo} />;
}

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

import { Navbar77 } from "@/components/beste/block/navbar77";

export default function Page() {
  return (
    <Navbar77
      brand="Altair"
      leftItems={[
        { label: "Therapy", href: "/therapy" },
        { label: "Coaching", href: "/coaching" },
      ]}
      rightItems={[
        { label: "Practitioners", href: "/team" },
        { label: "Fees", href: "/pricing" },
      ]}
      button={{ label: "Book", href: "/book" }}
      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 bar is a grid-cols-[1fr_auto_1fr], so the wordmark is centred against the viewport rather than against the links; an uneven number of links on either side does not pull it off centre.
• The mobile menu merges leftItems and rightItems into one list in that order, so nothing is lost on a phone where the split has no meaning.
• The menu is always in the markup and toggled with CSS, so every link is in the server-rendered HTML rather than appearing only after 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.
• The pill is visible at every width, unlike the sibling navbars in this family that hide it below md, because the centred grid keeps room for it beside the toggle.
• The shared NavLinks helper renders both sets, so the hover underline and the type are defined once rather than duplicated for each side.
• 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.