Veil Navbar

Navbar76: Veil Navbar

A sticky frosted navbar: wordmark, small-caps links whose underline draws in from the left on hover, and a pill, with a full-screen ink menu on a phone whose links blur up one after another.

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

Base UI flavor

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

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

Quick start

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

import { Navbar76, navbar76Demo } from "@/components/beste/block/navbar76";

export default function Page() {
  return <Navbar76 {...navbar76Demo} />;
}

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

import { Navbar76 } from "@/components/beste/block/navbar76";

export default function Page() {
  return (
    <Navbar76
      brand="Altair"
      items={[
        { label: "About", href: "/about" },
        { label: "Ways we work", href: "/work" },
        { label: "Journal", href: "/journal" },
      ]}
      button={{ label: "Book a session", href: "/book" }}
      note="Lisbon and online. Sessions in English and Portuguese."
      labels={{ open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

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

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

Behavior notes

• The mobile menu is always in the markup and shown with CSS (visible/invisible plus opacity) rather than mounted on open, so every navigation link is in the server-rendered HTML for crawlers and for a reader whose JavaScript has not arrived yet.
• Its items stagger through inline transitionDelay values computed from the index, so the reveal is CSS rather than a second animation library running inside a header.
• Those delays are reset to 0ms when the menu closes, so it collapses at once instead of unwinding item by item.
• The underline on each link is a scaled span with a left origin, so it draws in rather than fading, and it is aria-hidden because it carries no meaning.
• The overlay starts at top-20, exactly the height of the bar, so the wordmark and the close button stay visible and in place while the menu is open.
• The mobile menu inverts to the ink surface, which is why the pill inside it is pinned to the light tone rather than inheriting the one used in the bar.
• Every link in the overlay closes the menu on click, so navigating within the same page does not leave it open.