Top Curtain Menu

Navbar101: Top Curtain Menu

A sticky bar with a centred wordmark between a Menu toggle on the left and a button on the right. The toggle drops a curtain from the top of the viewport with three columns of large links and a footer row holding an email and social links, while the page behind it dims; the same curtain runs full height on a phone.

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://beste.dev/r/navbar101?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/navbar101?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/navbar101.tsx plus the shadcn button primitive it uses.

Quick start

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

import { Navbar101, navbar101Demo } from "@/components/beste/block/navbar101";

export default function Page() {
  return <Navbar101 {...navbar101Demo} />;
}

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

import { Navbar101 } from "@/components/beste/block/navbar101";

export default function Page() {
  return (
    <Navbar101
      brand="Meridian"
      columns={[
        {
          title: "Explore",
          links: [
            { label: "Residences", href: "/residences" },
            { label: "Offices", href: "/offices" },
          ],
        },
        {
          title: "Practice",
          links: [
            { label: "About", href: "/about" },
            { label: "Careers", href: "/careers" },
          ],
        },
      ]}
      email="[email protected]"
      socials={[
        { label: "Instagram", href: "https://instagram.com" },
        { label: "LinkedIn", href: "https://linkedin.com" },
      ]}
      action={{ label: "Start a project", href: "/contact" }}
      labels={{ menu: "Menu", close: "Close", open: "Open menu" }}
    />
  );
}

Props

type MenuColumn = {
  title: string;
  links: NavItem[];
};

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

type ActionButton = {
  label: string;
  href: string;
  variant?: "default" | "outline" | "ghost" | "secondary";
};

Behavior notes

• The curtain and its scrim are always rendered and toggled with CSS classes, so every link is in the server-rendered HTML. The closed curtain carries aria-hidden and inert.
• The curtain slides from -translate-y-full to translate-y-0; it is h-[70vh] from the md breakpoint and h-dvh below it, and its columns fade down one after another once it has opened.
• The toggle is a click target with aria-expanded and aria-controls; its two lines cross into an X while open. Escape, a click on the dimmed page below the curtain and any link inside it close the curtain.
• Body scroll is locked while the curtain is open and restored on close and on unmount.
• The bar stays above the curtain and drops its blur while open, so the brand and the toggle remain visible and the curtain reads as one surface with the bar.