Drawer Navbar

Navbar49: Drawer Navbar

Minimal navbar pairing a wordmark and an availability status dot with a two-line menu trigger that opens a dark, inverted right-side drawer over a backdrop. Inside the drawer, numbered links float in from the right with a staggered animation, followed by a call-to-action button, an email link, and social icons in the footer.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar49.tsx and the button1 component it uses for its call-to-action.

Quick start

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

import { Navbar49, navbar49Demo } from "@/components/beste/block/navbar49";

export default function Layout() {
  return <Navbar49 {...navbar49Demo} />;
}

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

import { Navbar49 } from "@/components/beste/block/navbar49";

export default function Layout() {
  return (
    <Navbar49
      brand="Polaris"
      statusLabel="Booking new projects for Q3"
      menuLabel="Menu"
      closeLabel="Close"
      links={[
        { label: "Work", href: "/work" },
        { label: "Studio", href: "/studio" },
        { label: "Contact", href: "/contact" },
      ]}
      socials={[
        { icon: "twitter", href: "https://twitter.com" },
        { icon: "instagram", href: "https://instagram.com" },
      ]}
      cta={{ label: "Start a Project", href: "/contact" }}
      email="studio@polaris.co"
    />
  );
}

Props

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

type SocialLink = {
  icon: "twitter" | "instagram" | "linkedin" | "dribbble";
  href: string;
};

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

Behavior notes

• Clicking the menu trigger sets open, which drives a fixed full-screen backdrop, a fixed max-w-md right-side drawer, and their internal content, all animated with translate-x/opacity transitions rather than conditional rendering, so the closed markup stays present in the DOM.
• Links inside the drawer animate in with a per-item stagger, sliding in from the right; the footer (CTA, email, socials) staggers in after the last link.
• Clicking the backdrop, clicking a link, or clicking the close control all set open back to false; there is no Escape-key handler.
• The drawer uses inverted colors (bg-foreground/text-background) regardless of the site's theme.
• The menu trigger and close control are custom two-line and X icons built from styled spans, not Lucide Menu/X; the second line of the hamburger shrinks on hover.
• The block's meta.fullscreen: true flag marks its opened state as a fullscreen overlay for the preview tooling, matching how the drawer actually covers the viewport when open.