Pill Menu Navbar

Navbar71: Pill Menu Navbar

A light editorial navbar built around soft muted pills instead of plain text links: each top-level item sits in a rounded bg-muted pill, and items that carry a links array grow a chevron and reveal a floating dropdown card on hover. A lowercase wordmark sits on the left and a solid accent call-to-action sits on the right, with everything collapsing into a stacked mobile menu below the lg breakpoint.

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

Base UI flavor

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

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

Quick start

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

import { Navbar71, navbar71Demo } from "@/components/beste/block/navbar71";

export default function Layout() {
  return <Navbar71 {...navbar71Demo} />;
}

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

import { Navbar71 } from "@/components/beste/block/navbar71";

export default function Layout() {
  return (
    <Navbar71
      brand="Acme"
      items={[
        {
          label: "Platform",
          href: "/platform",
          links: [
            { label: "Scheduling", href: "/platform/scheduling" },
            { label: "Billing", href: "/platform/billing" },
          ],
        },
        { label: "Pricing", href: "/pricing" },
      ]}
      button={{ label: "Request access", href: "/signup" }}
    />
  );
}

Props

type NavItem = { label: string; href: string; links?: NavLink[] };
type NavLink = { label: string; href: string };
type ActionLink = { label: string; href: string };

Behavior notes

• An item's dropdown only renders when its links array is non-empty; otherwise the pill is a plain link with no chevron.
• Dropdowns are always mounted in the DOM (so they render on the server) and revealed with an opacity/pointer-events hover transition on the pill's wrapper, not a JS-driven open state.
• The chevron next to a dropdown-bearing pill rotates 180 degrees on hover to indicate the open state.
• The mobile menu (below lg) is a single toggled panel; any item's sub-links are shown fully expanded underneath it, not as a nested accordion.
• The call-to-action button is hidden on mobile inline and instead rendered full-width at the bottom of the open mobile menu.