Navbar with Info Bar

Realestate75: Navbar with Info Bar

A sticky navbar for a development's sales site with a thin information row above the main bar: today's sales suite hours on the left with the phone number, and a launch notice with an arrow on the right, separated from the main bar by a hairline. The row collapses to zero height with a fade once the page has scrolled and comes back when you return to the top. Under it sit the text wordmark, five quiet links and a compact pill button, and on small screens the menu button opens an always-mounted panel that repeats the links, the phone, the notice and the button.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate75.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 realestate75Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.

import { Realestate75, realestate75Demo } from "@/components/beste/block/realestate75";

export default function Page() {
  return <Realestate75 {...realestate75Demo} />;
}

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

import { Realestate75 } from "@/components/beste/block/realestate75";

export default function Page() {
  return (
    <Realestate75
      brand="Alder Row"
      hours="Sales suite open today, 10 to 6"
      phone={{ label: "+44 20 7946 0000", href: "tel:+442079460000" }}
      notice={{ label: "Phase 2 launching 14 March 2027", href: "/phase-2" }}
      items={[
        { label: "Residences", href: "/residences" },
        { label: "Location", href: "/location" },
        { label: "Buying", href: "/buying" },
      ]}
      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

• The info row is a motion.div whose height animates between 40 px and 0 together with its opacity, driven by useScroll: it collapses once the page has scrolled past 24 px and expands again at the top. While collapsed it is aria-hidden and its links are taken out of the tab order.
• The row renders only when at least one of hours, phone or notice is set; the phone appears from the sm breakpoint and the notice from md, and both are repeated inside the mobile panel so nothing is lost on small screens.
• On mount the info row items, the wordmark, each link and the button rise in with staggered delays, and both hairlines draw from the left.
• The mobile panel is always in the markup and toggled with CSS visibility and opacity; the menu button carries aria-expanded, the links slide up with per-item delays and choosing any link closes the panel.
• With prefers-reduced-motion the entrances and hairline draws are skipped and the info row switches height without a transition.