Floating Capsule Navbar

Navbar74: Floating Capsule Navbar

A navbar rendered as a floating, softly rounded capsule: a bordered, shadowed bg-card bar inset from the page edges rather than a full-width bar, holding a lowercase wordmark, uppercase nav links, and an accent call-to-action. The mobile menu opens as a second matching rounded card directly beneath the capsule.

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

Base UI flavor

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

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

Quick start

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

import { Navbar74, navbar74Demo } from "@/components/beste/block/navbar74";

export default function Layout() {
  return <Navbar74 {...navbar74Demo} />;
}

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

import { Navbar74 } from "@/components/beste/block/navbar74";

export default function Layout() {
  return (
    <Navbar74
      brand="Acme"
      items={[
        { label: "Product", href: "/product" },
        { label: "Pricing", href: "/pricing" },
        { label: "Docs", href: "/docs" },
      ]}
      button={{ label: "Get started", href: "/signup" }}
    />
  );
}

Props

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

Behavior notes

• The nav bar itself is a rounded-md border bg-card capsule with a shadow, inset from the page edges by the <header>'s own padding, rather than spanning edge-to-edge like a typical navbar.
• Because the capsule uses bg-card/text-card-foreground fixed surface tokens, its text stays legible on the card surface even if the surrounding page background differs.
• The mobile menu (below lg) is not an overlay: it renders as a second rounded-md border bg-card panel stacked directly below the capsule, matching its styling.
• There are no dropdowns; every item in items is a flat, single-level link.