Fullscreen Overlay Navbar

Navbar64: Fullscreen Overlay Navbar

A quiet top bar whose menu trigger opens a fullscreen overlay rather than a dropdown or panel: oversized numbered nav links fill the viewport with hover arrows, and a contact block plus social row and CTA sit beneath them.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar64.tsx, the badge7 and button12 components it uses for the overlay's badges and CTA, and its dependencies.

Quick start

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

import { Navbar64, navbar64Demo } from "@/components/beste/block/navbar64";

export default function Layout() {
  return <Navbar64 {...navbar64Demo} />;
}

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

import { Navbar64 } from "@/components/beste/block/navbar64";

export default function Layout() {
  return (
    <Navbar64
      brand="Northwind"
      links={[
        { label: "Selected Work", href: "/work" },
        { label: "The Studio", href: "/studio" },
        { label: "Say Hello", href: "/contact" },
      ]}
      button={{ label: "Begin a brief", href: "/contact" }}
      email="studio@northwind.co"
      socials={[{ label: "Instagram", href: "https://instagram.com" }]}
      labels={{ menu: "Menu", menuBadge: "Index", contactBadge: "Reach us" }}
    />
  );
}

Props

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

type Labels = {
  menu: string;
  menuBadge: string;
  contactBadge: string;
};

Behavior notes

• Opening the menu sets open to true and renders a fixed inset-0 z-[60] overlay that covers the full viewport, this is the fullscreen behavior the block is built around; it has its own header row (brand + close button) and a scrollable content area.
• Unlike navbar60/navbar61's mega panels, the overlay is conditionally rendered ({open && ...}), not always mounted and hidden via CSS, so it is absent from the server HTML until opened.
• The overlay closes only via its explicit close button or by clicking a nav link; there is no outside-click or Escape-key listener.
• Links inside the overlay are numbered (01, 02, ...) and rendered at very large sizes (text-4xl up to md:text-6xl) with a trailing arrow icon that shifts on hover.
• The top-bar CTA switches visibility at the sm breakpoint (hidden sm:block), narrower than the lg breakpoint most other navbars in this set use for their desktop elements.
• The overlay's contact footer stacks the email link, social links, and CTA in a column on mobile and lays them out as a row (md:flex-row md:items-end md:justify-between) on larger screens.