Navbar with Residences Panel

Realestate74: Navbar with Residences Panel

A sticky navbar for a development's sales site where the Residences link opens a full-width panel: five home types in a ruled list (type, title, size and availability, from price) beside a 4:3 photograph with a caption and a text link to the comparison page. The panel is always in the markup and is revealed with CSS on hover or on keyboard focus, so it never flashes in on the client. The other links stay plain, a compact pill button sits on the right, and on small screens the menu button opens an always-mounted panel in which the same five types fold out under a Residences row.

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

Base UI flavor

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

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

import { Realestate74, realestate74Demo } from "@/components/beste/block/realestate74";

export default function Page() {
  return <Realestate74 {...realestate74Demo} />;
}

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

import { Realestate74 } from "@/components/beste/block/realestate74";

export default function Page() {
  return (
    <Realestate74
      brand="Alder Row"
      residences={{
        label: "Residences",
        href: "/residences",
        types: [
          { name: "Type A", title: "Two bedroom", detail: "78 m², 5 available", price: "From $640,000", href: "/residences/type-a" },
          { name: "Type C", title: "Three bedroom", detail: "112 m², 3 available", price: "From $895,000", href: "/residences/type-c" },
          { name: "Type E", title: "Penthouse", detail: "146 m² + 62 m² terrace", price: "From $1,650,000", href: "/residences/type-e" },
        ],
        image: {
          src: "https://oud.pics/b/realestate/alder-warehouse-living.webp",
          alt: "A double-height living room with brick, a tall oak window and a linen sofa",
          caption: "Warehouse living room, Type C",
        },
        link: { label: "Compare all five types", href: "/residences/compare" },
      }}
      items={[
        { label: "Location", href: "/location" },
        { label: "Buying", href: "/buying" },
      ]}
      button={{ label: "Book a viewing", href: "/viewing" }}
      labels={{ open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

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

type ResidenceType = {
  name: string;
  title: string;
  detail: string;
  price: string;
  href: string;
};

type ResidencesMenu = {
  label: string;
  href: string;
  types: ResidenceType[];
  image?: { src: string; alt: string; caption?: string };
  link?: NavItem;
};

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

Behavior notes

• The panel is a child of the Residences list item, which spans the full height of the bar, so the pointer can travel straight down from the link into the panel without the hover breaking. Visibility, opacity and a 4 px slide are driven by group-hover and group-focus-within, so tabbing to the link or into the panel also opens it.
• Because the panel is only hidden with CSS, the five type links and the photograph are part of the server HTML and are crawlable; the chevron on the Residences link rotates while the panel is open.
• The wordmark, the links and the button rise in on mount with staggered delays and the hairline under the bar draws from the left.
• The mobile panel is always mounted and toggled with CSS; its Residences row is a button with aria-expanded that folds the type list out with a grid-rows transition, and the plain links follow it with per-item delays. Choosing any link closes the panel.
• With prefers-reduced-motion the mount entrances and the hairline draw are skipped and the bar renders in its final state.