Numbered Index Menu
01Work
A studio bar whose links read as a numbered index (01 Work, 02 Studio, 03 Journal); hovering or clicking an entry with projects reveals a full-width panel holding a horizontally scrolling, scroll-snapped strip of project thumbnails with captions and arrow buttons. On a phone a fullscreen overlay lists the same entries as big numbered links. Every panel stays in the markup and is toggled with CSS.
A studio bar whose links read as a numbered index: 01 Work, 02 Studio, 03 Journal, 04 Contact. Any entry that carries projects opens a full-width panel with a horizontal, scroll-snapped strip of project thumbnails and captions. On a phone the index becomes a fullscreen list of big numbered links.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
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/navbar108?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/navbar108?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar108.tsx plus the shadcn button primitive it uses.
The installed file exports navbar108Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar108, navbar108Demo } from "@/components/beste/block/navbar108";
export default function Page() {
return <Navbar108 {...navbar108Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar108 } from "@/components/beste/block/navbar108";
export default function Page() {
return (
<Navbar108
brand="Kestrel"
items={[
{
label: "Work",
href: "/work",
projects: [
{ title: "Harbor Bank", description: "Brand and product for a coastal lender", href: "/work/harbor", image: { src: "/work/harbor.jpg", alt: "A glass office tower" } },
{ title: "Alder Rooms", description: "Booking flow for a boutique hotel group", href: "/work/alder", image: { src: "/work/alder.jpg", alt: "A bright workspace" } },
],
},
{ label: "Studio", href: "/studio" },
{ label: "Journal", href: "/journal" },
]}
button={{ label: "Start a project", href: "/contact", variant: "outline" }}
email="[email protected]"
labels={{ menu: "Menu", close: "Close", openMenu: "Open menu", closeMenu: "Close menu", viewAll: "All projects", previous: "Scroll back", next: "Scroll forward" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark on the left |
items | IndexItem[] | [] | Index entries, numbered from 01 in order; entries with projects open a strip panel |
button | ActionButton | – | Action on the right; the full-width button at the foot of the mobile overlay |
email | string | – | Contact address shown as a mailto: link in the mobile overlay |
labels | { menu?: string; close?: string; openMenu?: string; closeMenu?: string; viewAll?: string; previous?: string; next?: string } | {} | Visible and accessible text for the mobile toggle, the panel link and the strip arrows |
className | string | – | Extra classes for the outer <header> |
type IndexItem = {
label: string;
href: string;
projects?: Project[];
};
type Project = {
title: string;
description: string;
href: string;
image: { src: string; alt: string };
};
type ActionButton = {
label: string;
href: string;
variant?: "default" | "outline" | "ghost" | "secondary";
};snap-x snap-mandatory row of w-72 cards; the arrow buttons scroll it by 80 percent of its visible width, and touchpads or Shift and wheel scroll it natively.motion-safe translates, and closes when a link is tapped.