Locale and Destinations Mega

Navbar107: Locale and Destinations Mega

A travel bar with the brand, a Destinations trigger and plain links on the left, and a language button on the right that shows the current language code and currency. Destinations drops a full-width band of region columns; the language button opens a list of languages with their native names and currencies. On a phone a right drawer carries everything, with the language rows pinned to its bottom.

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

Base UI flavor

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

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

Quick start

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

import { Navbar107, navbar107Demo } from "@/components/beste/block/navbar107";

export default function Page() {
  return <Navbar107 {...navbar107Demo} />;
}

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

import { Navbar107 } from "@/components/beste/block/navbar107";

export default function Page() {
  return (
    <Navbar107
      brand="Meridian"
      destinations={{
        label: "Destinations",
        regions: [
          {
            title: "Europe",
            links: [
              { label: "Portugal", href: "/destinations/portugal" },
              { label: "Greece", href: "/destinations/greece" },
            ],
          },
          {
            title: "Asia",
            links: [
              { label: "Japan", href: "/destinations/japan" },
              { label: "Vietnam", href: "/destinations/vietnam" },
            ],
          },
        ],
      }}
      links={[
        { label: "Journeys", href: "/journeys" },
        { label: "Stays", href: "/stays" },
      ]}
      languages={[
        { code: "EN", name: "English", nativeName: "English", currency: "USD", current: true },
        { code: "DE", name: "German", nativeName: "Deutsch", currency: "EUR" },
      ]}
      button={{ label: "Plan a trip", href: "/plan" }}
      labels={{ menu: "Open menu", close: "Close menu", language: "Change language", languages: "Language and currency" }}
    />
  );
}

Props

type Region = {
  title: string;
  links: NavItem[];
};

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

type Language = {
  code: string;
  name: string;
  nativeName: string;
  currency: string;
  current?: boolean;
};

type ActionButton = {
  label: string;
  href: string;
  variant?: "default" | "outline" | "ghost" | "secondary";
};

Behavior notes

• The Destinations band, the language card, the mobile scrim and the mobile drawer are server-rendered and always in the markup; each is shown or hidden with CSS classes rather than mounted on demand.
• Only one desktop panel is open at a time: hovering or clicking Destinations or the language button opens its own panel and closes the other; hovering a plain link closes both.
• Picking a language is client state only: the button label, the currency and the check follow it, and each row carries a lang attribute so its native name is read correctly. Wire the selection to your router or i18n setup.
• Escape closes every panel and the drawer; a click outside the header and the pointer leaving the header close the desktop panels.
• The drawer slides in from translate-x-full, locks body scroll while open, scrolls its links and regions on their own, and keeps the language rows and the button in a footer capped at 45vh.