Fullscreen Overlay Navbar

Navbar45: Fullscreen Overlay Navbar

Dark navbar whose hamburger cell opens a fullscreen overlay menu that slides down from the top of the viewport: centered links cascade in with a per-item stagger, followed by a contact footer with address and phone. The main bar itself stays compact, showing a short quick-link set and CTA next to the brand.

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

Base UI flavor

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

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

Quick start

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

import { Navbar45, navbar45Demo } from "@/components/beste/block/navbar45";

export default function Layout() {
  return <Navbar45 {...navbar45Demo} />;
}

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

import { Navbar45 } from "@/components/beste/block/navbar45";

export default function Layout() {
  return (
    <Navbar45
      brand="Polaris"
      menuLabel="Menu"
      closeLabel="Close"
      links={[{ label: "Work", href: "/work" }]}
      menuLinks={[
        { label: "Home", href: "/" },
        { label: "Work", href: "/work" },
        { label: "Studio", href: "/studio" },
        { label: "Contact", href: "/contact" },
      ]}
      cta={{ label: "Book a Call", href: "/contact" }}
      address="12 Mercer Street, Soho, New York"
      phone="+1 212 555 0134"
    />
  );
}

Props

NavLink / CtaLink: { label: string; href: string }.

Behavior notes

• This block's meta sets fullscreen: true, so its preview renders at fullscreen size; opening the menu covers the entire viewport as a fixed, fullscreen overlay rather than a dropdown or side panel.
• The overlay is always mounted in the DOM. Open/closed state is a translate-y transform plus opacity transition (-translate-y-full to translate-y-0), not a conditional render.
• links (quick links) and menuLinks (the full list) are separate props by design: the trimmed set stays visible in the header bar, the fuller set fills the overlay.
• Each overlay link, and the contact footer, animate in with a staggered transitionDelay computed from its index (the footer's delay also factors in menuLinks.length), applied only while open is true.
• phone renders as a tel: link with whitespace stripped from the number.