Preview Card Mega

Navbar95: Preview Card Mega

A studio bar with a wordmark, a Work trigger, plain links and a button. Work opens a full-width panel of six large project links whose preview card on the right cross-fades to whichever link is hovered or focused, and on phones a plain flat list drops under the bar.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar95.tsx plus the shadcn button primitive it uses.

Quick start

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

import { Navbar95, navbar95Demo } from "@/components/beste/block/navbar95";

export default function Page() {
  return <Navbar95 {...navbar95Demo} />;
}

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

import { Navbar95 } from "@/components/beste/block/navbar95";

export default function Page() {
  return (
    <Navbar95
      brand="Alder"
      work={{
        label: "Work",
        items: [
          {
            title: "Harbor Bank",
            description: "A banking app rebuilt around one weekly check-in.",
            href: "/work/harbor",
            image: { src: "/photos/harbor.jpg", alt: "A laptop showing charts" },
          },
          {
            title: "Lumen Travel",
            description: "A booking flow that starts with the beach.",
            href: "/work/lumen",
            image: { src: "/photos/lumen.jpg", alt: "An aerial view of a beach" },
          },
        ],
        viewAll: { label: "All case studies", href: "/work" },
      }}
      links={[
        { label: "Studio", href: "/studio" },
        { label: "Journal", href: "/journal" },
      ]}
      button={{ label: "Start a project", href: "/contact" }}
      labels={{ open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

type WorkMenu = {
  label: string;
  items: WorkItem[];
  viewAll?: NavItem;
};

type WorkItem = {
  title: string;
  description: string;
  href: string;
  image: { src: string; alt: string };
};

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

Behavior notes

• The Work panel, every preview card and the mobile list are server-rendered and CSS-toggled, so all project links and images are in the HTML.
• The cards share one grid cell (col-start-1 row-start-1), so the column sizes to the tallest card and the active one cross-fades in with opacity over 500ms while the others take pointer-events-none.
• The active card follows both onMouseEnter and onFocus, so tabbing down the list swaps the preview just like the pointer does; it stays on the last link touched when the panel closes.
• The panel opens on hover or click of the trigger and closes on Escape, on a click outside the header and when the pointer leaves it.
• The mobile list flattens projects, links and the action into one column without images; it is inert while closed and any link closes it.