Development Navbar

Realestate73: Development Navbar

A calm sticky navbar for a property development's sales site: a text wordmark on the left, five quiet links in the middle, a phone link and a compact pill button on the right, all rising in on mount. A hairline under the bar stays hidden at the top of the page and fades in once you have scrolled, and on small screens the menu button opens an always-mounted panel whose links, phone and button settle in 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://beste.dev/r/realestate73?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/realestate73?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate73.tsx plus the Button25 pill it uses for the call to action and the shadcn/ui button primitive behind it.

Quick start

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

import { Realestate73, realestate73Demo } from "@/components/beste/block/realestate73";

export default function Page() {
  return <Realestate73 {...realestate73Demo} />;
}

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

import { Realestate73 } from "@/components/beste/block/realestate73";

export default function Page() {
  return (
    <Realestate73
      brand="Alder Row"
      items={[
        { label: "Residences", href: "/residences" },
        { label: "Location", href: "/location" },
        { label: "Buying", href: "/buying" },
      ]}
      phone={{ label: "+44 20 7946 0000", href: "tel:+442079460000" }}
      button={{ label: "Register your interest", href: "/register" }}
      labels={{ open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

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

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

Behavior notes

• Everything in the bar rises in on mount with staggered delays: the wordmark first, then each link 60 ms apart, then the phone link and the button.
• The hairline under the bar is driven by useScroll: it fades in once the page has scrolled more than 8 px, and also while the mobile panel is open so the panel reads as attached to the bar.
• The mobile panel is always in the markup and is toggled with CSS visibility and opacity, so its links are in the server HTML; the menu button carries aria-expanded and swaps its label between labels.open and labels.close.
• Inside the open panel each link slides up with a CSS transition delayed by its index, and the phone and button follow after the last link. Choosing any link closes the panel.
• With prefers-reduced-motion the mount entrances are skipped and the hairline switches without a fade.