Context Switcher Bar

Navbar106: Context Switcher Bar

An app-style bar for products split into sections: the brand, a thin rule, and a switcher button that names the section you are in. The switcher drops a list of every section with a one-line description and a check on the current one, while the actions stay on the right. On a phone the same list rises from the bottom as a sheet.

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

Base UI flavor

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

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

Quick start

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

import { Navbar106, navbar106Demo } from "@/components/beste/block/navbar106";

export default function Page() {
  return <Navbar106 {...navbar106Demo} />;
}

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

import { Navbar106 } from "@/components/beste/block/navbar106";

export default function Page() {
  return (
    <Navbar106
      brand="Orbit"
      sections={[
        { label: "Analytics", description: "Traffic, funnels and retention.", href: "/analytics", current: true },
        { label: "Billing", description: "Plans, invoices and usage.", href: "/billing" },
        { label: "Settings", description: "Members, roles and API keys.", href: "/settings" },
      ]}
      actions={[
        { label: "Invite", href: "/invite", variant: "outline" },
        { label: "New report", href: "/reports/new" },
      ]}
      labels={{ switch: "Switch section", close: "Close", heading: "Go to" }}
    />
  );
}

Props

type Section = {
  label: string;
  description: string;
  href: string;
  current?: boolean;
};

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

Behavior notes

• The desktop list and the mobile bottom sheet are server-rendered and always in the markup; each is shown or hidden with CSS classes rather than mounted on demand.
• One switcher button drives both panels: it opens on mouse hover (a pointerType check keeps touch taps from opening and closing it in one go) or click, and on a phone the floating list is hidden and the sheet takes over.
• Picking a section moves the check and the button label to it in client state and closes the panel; the starting section is the first entry with current: true, or the first entry.
• Escape, a click outside the header, a tap on the scrim and the pointer leaving the header all close the switcher.
• The sheet slides up from translate-y-full, is capped at 80vh with its own scroll, and carries a heading and a close button above the list.