Photo Backdrop Mega
Small group journeys, planned to the hour and never rushed.
See all 48 journeysSmall group journeys, planned to the hour and never rushed.
Brand, links and a button in a sticky bar. Journeys drops a full-width panel set on a photo under a dark scrim, with a headline, an arrow link and four columns of light links. On a phone the menu is an overlay under the bar that opens with the same photo and headline on top, then the link columns. Panels stay in the markup and are toggled with CSS.
A sticky bar with the brand, links and a button. Journeys drops a full-width panel set on a photograph under a dark scrim: a headline and an arrow link across the top, then four columns of light links over the image. On a phone the menu is an overlay under the bar that opens with the same photo and headline, followed by the link columns in a two-column grid, the plain links and the buttons.
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/navbar115?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/navbar115?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/navbar115.tsx plus the shadcn button primitive it uses.
The installed file exports navbar115Demo alongside the block: the exact props behind the preview above. Spread it to get a working navbar in one line.
import { Navbar115, navbar115Demo } from "@/components/beste/block/navbar115";
export default function Page() {
return <Navbar115 {...navbar115Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Navbar115 } from "@/components/beste/block/navbar115";
export default function Page() {
return (
<Navbar115
brand="Kestrel"
journeys={{
label: "Journeys",
heading: "Small group journeys, never rushed.",
image: { src: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?w=2000&h=900&fit=crop", alt: "Aerial view of a beach" },
columns: [
{ title: "Coastlines", links: [{ label: "Amalfi by boat", href: "/amalfi" }, { label: "Algarve cliffs", href: "/algarve" }] },
{ title: "Mountains", links: [{ label: "Dolomites hut to hut", href: "/dolomites" }, { label: "Julian Alps", href: "/julian-alps" }] },
],
cta: { label: "See all journeys", href: "/journeys" },
}}
links={[
{ label: "Guides", href: "/guides" },
{ label: "Dates", href: "/dates" },
]}
actions={[{ label: "Plan a trip", href: "/plan" }]}
labels={{ open: "Open menu", close: "Close menu" }}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
brand | string | – | Wordmark on the left |
journeys | JourneyMenu | – | The item that opens the photo panel |
links | NavItem[] | [] | Plain links beside it |
actions | ActionButton[] | [] | Buttons on the right, repeated at the foot of the mobile overlay |
labels | { open?: string; close?: string } | {} | Accessible names for the mobile toggle |
className | string | – | Extra classes for the outer <header> |
type JourneyMenu = {
label: string;
heading: string;
image: { src: string; alt: string };
columns: JourneyColumn[];
cta?: NavItem;
};
type JourneyColumn = {
title: string;
links: NavItem[];
};
type NavItem = {
label: string;
href: string;
};
type ActionButton = {
label: string;
href: string;
variant?: "default" | "outline" | "ghost" | "secondary";
};aria-hidden and inert.from-foreground/80 scrim, and the panel links use text-background, so they stay readable over any image you pass.aria-expanded and aria-controls; the panel closes on mouse leave, Escape and a pointer down outside the header.