Centered Logo Navbar

Navbar44: Centered Logo Navbar

Symmetric three-column navbar: nav links sit on the left, the square-mark wordmark is centered via a grid-cols-[1fr_auto_1fr] layout, and a seal CTA sits on the right. Below lg the links are replaced by a hamburger toggle and the CTA collapses to an icon-only circular arrow button, and the mobile menu opens as a bordered tile grid.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar44.tsx and the button1 component it uses for its call-to-action.

Quick start

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

import { Navbar44, navbar44Demo } from "@/components/beste/block/navbar44";

export default function Layout() {
  return <Navbar44 {...navbar44Demo} />;
}

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

import { Navbar44 } from "@/components/beste/block/navbar44";

export default function Layout() {
  return (
    <Navbar44
      brand="Polaris"
      links={[
        { label: "Work", href: "/work" },
        { label: "Studio", href: "/studio" },
        { label: "Journal", href: "/journal" },
      ]}
      cta={{ label: "Start a Project", href: "/contact" }}
    />
  );
}

Props

NavLink / CtaLink: { label: string; href: string }.

Behavior notes

• The 3-column grid keeps the brand mark visually centered regardless of how wide the link list or CTA is.
• Below lg, the CTA doesn't disappear: it collapses to an icon-only circular arrow link (aria-label set from cta.label), while the link list is replaced entirely by the hamburger toggle.
• The mobile menu is a 2-column bordered tile grid; each link cell shows a zero-padded index number and the grid uses a bg-border/gap-px trick to draw 1px dividers between cells.
• The CTA is repeated as a full-width button at the bottom of the mobile panel.
• The mobile menu is conditionally rendered ({open && ...}) via the toggle state.