Full Screen Menu Navbar

Navbar82: Full Screen Menu Navbar

A wordmark and a menu word, and behind them a full-screen ink menu under film grain: numbered serif entries on one side, a photograph and description swapping to match the hovered entry on the other, with contacts and socials across the foot.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar82.tsx plus the button22 sliding-marker pill it uses.

Quick start

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

import { Navbar82, navbar82Demo } from "@/components/beste/block/navbar82";

export default function Page() {
  return <Navbar82 {...navbar82Demo} />;
}

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

import { Navbar82 } from "@/components/beste/block/navbar82";

export default function Page() {
  return (
    <Navbar82
      brand="Altair"
      entries={[
        {
          label: "Therapy",
          description: "Weekly, with one steady person.",
          href: "/therapy",
          image: { src: "/rooms/bench.jpg", alt: "A sunlit room with a low timber bench" },
        },
      ]}
      contacts={[{ label: "Email", value: "[email protected]" }]}
      socials={[{ label: "Instagram", href: "https://instagram.com" }]}
      button={{ label: "First call", href: "/call" }}
      labels={{ menu: "Menu", close: "Close" }}
    />
  );
}

Props

type MenuEntry = {
  label: string;
  description: string;
  href: string;
  image: { src: string; alt: string };
};

type ContactLine = {
  label: string;
  value: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The bar itself goes transparent and flips to the pale text colour when the menu opens, so the wordmark and the toggle stay put and simply invert rather than being covered by the overlay.
• The toggle is two hairlines that rotate into a cross, animated on translate and rotate only, so the same element serves as both the open and close control and never re-mounts.
• document.body.style.overflow is locked while the menu is open and restored on unmount, so the page behind cannot scroll under it.
• The menu is always in the markup and revealed with CSS, so every entry is in the server-rendered HTML rather than appearing only after it is opened.
• Entries stagger through inline transitionDelay values from the index, and the foot row waits on 200 + entries.length * 70 so it always arrives after the last entry however many there are.
• The preview swaps on onMouseEnter and onFocus together and is keyed inside AnimatePresence, so tabbing through the entries changes both the photograph and the description with a cross-fade.
• The preview column is hidden md:block, so on a phone the menu is just the numbered list and the foot, and every entry closes the menu on click.