Centered Link Navbar

Navbar72: Centered Link Navbar

A minimal navbar that keeps the wordmark and call-to-action pinned to the edges while the link list is absolutely positioned and centered on the row independent of their widths, so the links stay dead-center even when the brand name or button label changes length. Below the lg breakpoint the centered row collapses into a toggled stacked menu.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar72.tsx, the button21 component it uses for its call-to-action, and its dependencies.

Quick start

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

import { Navbar72, navbar72Demo } from "@/components/beste/block/navbar72";

export default function Layout() {
  return <Navbar72 {...navbar72Demo} />;
}

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

import { Navbar72 } from "@/components/beste/block/navbar72";

export default function Layout() {
  return (
    <Navbar72
      brand="Acme"
      items={[
        { label: "Platform", href: "/platform" },
        { label: "Pricing", href: "/pricing" },
        { label: "Company", href: "/company" },
      ]}
      button={{ label: "Book a demo", href: "/demo" }}
    />
  );
}

Props

type NavLink = { label: string; href: string };
type ActionLink = { label: string; href: string };

Behavior notes

• The link row is absolute left-1/2 -translate-x-1/2 inside a relative nav, so it stays visually centered regardless of the width of the brand or the call-to-action next to it.
• There are no dropdowns: every item in items is a flat, single-level link.
• The mobile menu (below lg) replaces the centered row with a vertical stack of the same links, followed by a full-width call-to-action button when button is set.
• Links use text-muted-foreground with a hover:text-foreground transition; nothing is marked as an active/current route.