Studio Bar Navbar

Navbar59: Studio Bar Navbar

Editorial single-row navbar built around a bold wordmark, a row of quiet-but-bold desktop links, and an outline pill CTA. On small screens it collapses to a full-width panel that drops beneath the bar with oversized stacked links and a full-bleed CTA.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar59.tsx, the button12 component it uses for its CTA, and its dependencies.

Quick start

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

import { Navbar59, navbar59Demo } from "@/components/beste/block/navbar59";

export default function Layout() {
  return <Navbar59 {...navbar59Demo} />;
}

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

import { Navbar59 } from "@/components/beste/block/navbar59";

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

Props

NavLink: { label, href }.

Behavior notes

• The mobile menu is a plain useState toggle: clicking the hamburger reveals a full-width panel below the bar; there is no outside-click or Escape handling to auto-close it.
• The breakpoint for switching between the desktop row and the hamburger is lg (1024px).
• The desktop CTA renders with tone="outline"; the mobile CTA drops the outline tone and stretches full width with justify-between.
• Links are single-level only, there is no dropdown or mega-menu behavior on this navbar.