Single Menu Tabs Panel

Navbar103: Single Menu Tabs Panel

A sticky bar with the brand, a single Menu trigger and a pair of buttons. The trigger drops a full-width panel with horizontal tabs along the top, one per group, and a grid of described links beneath that swaps with the selected tab; on a phone the same groups become an accordion inside a panel 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/navbar103?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

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

import { Navbar103, navbar103Demo } from "@/components/beste/block/navbar103";

export default function Page() {
  return <Navbar103 {...navbar103Demo} />;
}

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

import { Navbar103 } from "@/components/beste/block/navbar103";

export default function Page() {
  return (
    <Navbar103
      brand="Harbor"
      tabs={[
        {
          label: "Products",
          links: [
            { title: "Payments", description: "Accept cards and wallets.", href: "/payments" },
            { title: "Invoicing", description: "Invoices that chase themselves.", href: "/invoicing" },
          ],
          footer: { label: "See all products", href: "/products" },
        },
        {
          label: "Resources",
          links: [
            { title: "Documentation", description: "Guides and API reference.", href: "/docs" },
            { title: "Status", description: "Live uptime for every region.", href: "/status" },
          ],
        },
      ]}
      actions={[
        { label: "Sign in", href: "/login", variant: "ghost" },
        { label: "Open an account", href: "/signup" },
      ]}
      labels={{ menu: "Menu", open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

type MenuTab = {
  label: string;
  links: MenuLink[];
  footer?: { label: string; href: string };
};

type MenuLink = {
  title: string;
  description: string;
  href: string;
};

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

Behavior notes

• The panel, every tab panel and the mobile accordion are always rendered and toggled with CSS classes, so every link is in the server-rendered HTML. Hidden panels carry aria-hidden and inert.
• The Menu trigger opens on hover and on click with aria-expanded and aria-controls; the panel closes when the pointer leaves the header, on Escape and on a pointer down outside.
• Tabs follow the ARIA tabs pattern: role="tab" with aria-selected, a roving tabIndex, Arrow Left and Arrow Right to move (wrapping at the ends) plus Home and End. All tab panels share one grid cell and cross-fade, so the panel height never jumps.
• On a phone the tabs become accordion headers with aria-expanded; one group is open at a time and tapping the open one closes it. Each group grows with a grid-template-rows transition.
• Links inside the mobile panel close it on click.