Keyboard First Mega

Navbar117: Keyboard First Mega

A sticky bar with the brand, links and a button, whose Explore panel is built for people who navigate with a keyboard. The three link columns share one roving tab stop: Arrow keys move between items and across columns, Home and End jump, Escape closes the panel and puts focus back on the trigger, and every link shows a clear focus ring. On a phone the menu is an overlay under the bar with large 56 pixel touch rows and the same visible focus rings.

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

Base UI flavor

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

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

Quick start

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

import { Navbar117, navbar117Demo } from "@/components/beste/block/navbar117";

export default function Page() {
  return <Navbar117 {...navbar117Demo} />;
}

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

import { Navbar117 } from "@/components/beste/block/navbar117";

export default function Page() {
  return (
    <Navbar117
      brand="Northwind"
      explore={{
        label: "Explore",
        columns: [
          {
            title: "Platform",
            links: [
              { title: "Editor", description: "Write, review and publish in one place.", href: "/editor" },
              { title: "API", description: "Every action available over REST.", href: "/api" },
            ],
          },
          {
            title: "Learn",
            links: [
              { title: "Guides", description: "Step by step, from setup to scale.", href: "/guides" },
              { title: "Changelog", description: "What shipped this week.", href: "/changelog" },
            ],
          },
        ],
      }}
      links={[
        { label: "Pricing", href: "/pricing" },
        { label: "Docs", href: "/docs" },
      ]}
      actions={[{ label: "Try Northwind", href: "/signup" }]}
      labels={{ open: "Open menu", close: "Close menu", hint: "Arrow keys move, Home and End jump, Esc closes" }}
    />
  );
}

Props

type ExploreMenu = {
  label: string;
  columns: ExploreColumn[];
};

type ExploreColumn = {
  title: string;
  links: ExploreLink[];
};

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

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

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

Behavior notes

• The Explore panel and the mobile overlay are always rendered and toggled with CSS classes, so every link is in the server-rendered HTML. Closed panels carry aria-hidden and inert, and the panel sits right after its trigger in the DOM so Tab order follows the bar.
• Only one panel link has tabIndex={0} at a time (a roving tab stop), so Tab enters the panel once and leaves it once. Arrow Up and Down wrap inside a column, Arrow Left and Right move to the same row of the neighbouring column (clamped to its length), Home and End jump to the top or bottom of the column, and with Ctrl or Cmd held they jump to the first or last link of the whole panel.
• On the trigger, Arrow Down opens the panel and focuses the last remembered link, and Arrow Up opens it on the very last link; Enter and Space toggle it as a normal button.
• Escape closes the panel from anywhere and, when focus was inside it, returns focus to the trigger; the mobile overlay does the same with its toggle. Focus leaving the panel, a pointer down outside the header also closes it; moving the mouse away closes it only when keyboard focus is not inside, so a keyboard user never loses their place.
• Every link carries focus-visible:ring-2 ring-ring with an offset, and mobile rows are min-h-14 touch targets; the mobile overlay locks body scroll while open.