Floating Pill Navbar

Navbar37: Floating Pill Navbar

A compact navbar that floats off the viewport edge instead of spanning full width: it sits inside a max-w-4xl wrapper with its own margin, and the inner <nav> is a bordered, backdrop-blurred pill (rounded corners on mobile, fully rounded on desktop) rather than a bar with a bottom border. A position prop pins the whole thing near the top or bottom of the viewport, which suits landing pages and portfolios that want a minimal, detached navigation style.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar37.tsx and the shadcn/ui dependencies it needs (button).

Quick start

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

import { Navbar37, navbar37Demo } from "@/components/beste/block/navbar37";

export default function Layout() {
  return <Navbar37 {...navbar37Demo} />;
}

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

import { Navbar37 } from "@/components/beste/block/navbar37";

export default function Layout() {
  return (
    <Navbar37
      logo={{ text: "Float", href: "/" }}
      navItems={[
        { label: "Home", href: "/" },
        { label: "Features", href: "/features" },
        { label: "Pricing", href: "/pricing" },
      ]}
      actionButton={{ label: "Get Started", href: "/signup" }}
      position="top"
    />
  );
}

Props

type NavItem = { label: string; href?: string };

Behavior notes

• The outer <div> is sticky top-0 with a top-4 or bottom-4 offset depending on position, keeping the pill floating a fixed gap from the edge instead of flush against it.
• The <nav> itself uses bg-background/95 with backdrop-blur (and a supports-[backdrop-filter] fallback opacity), so content scrolling underneath shows through softly.
• Corners are rounded-xl on mobile and rounded-full from md up, giving a boxier shape on small screens and a true pill on desktop.
• Desktop nav links and the action button show at md and above; below that a hamburger button toggles a conditionally rendered panel ({mobileMenuOpen && ...}) inside the same pill, stacking links and a full-width button.
• There is only a single actionButton, not an array, so this block supports exactly one CTA by design.