Docs Navbar

Navbar90: Docs Navbar

A documentation bar: wordmark and version pill, a Docs trigger that drops a two-column card of described links, plain links, a search trigger styled like an input with a keyboard hint, a theme button and a ghost GitHub link, with a left drawer and a collapsible section tree on phones.

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

Base UI flavor

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

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

Quick start

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

import { Navbar90, navbar90Demo } from "@/components/beste/block/navbar90";

export default function Page() {
  return <Navbar90 {...navbar90Demo} />;
}

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

import { Navbar90 } from "@/components/beste/block/navbar90";

export default function Page() {
  return (
    <Navbar90
      brand="Fieldnote"
      version="v4.2"
      menu={{
        label: "Docs",
        items: [
          { title: "Getting started", description: "Install the CLI and ship your first page.", href: "/docs" },
          { title: "Theming", description: "Tokens, dark mode and the palette.", href: "/docs/theming" },
        ],
      }}
      links={[
        { label: "Components", href: "/components" },
        { label: "Blog", href: "/blog" },
      ]}
      repo={{ label: "GitHub", href: "https://github.com" }}
      tree={[
        {
          title: "Getting started",
          links: [
            { label: "Installation", href: "/docs/install" },
            { label: "First page", href: "/docs/first-page" },
          ],
        },
        { title: "Components", links: [{ label: "Button", href: "/components/button" }] },
      ]}
      labels={{ search: "Search docs", searchHint: "Ctrl K", theme: "Toggle theme", open: "Open menu", close: "Close menu" }}
    />
  );
}

Props

type Dropdown = {
  label: string;
  items: DropdownItem[];
};

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

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

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

Behavior notes

• The dropdown and the mobile drawer are server-rendered and always in the markup; CSS classes swap invisible opacity-0 for visible opacity-100 and -translate-x-full for translate-x-0, so every link is in the HTML before any script runs.
• The Docs trigger opens on hover and on click, carries aria-expanded and aria-controls, and closes on Escape, on a click outside the header (a mousedown listener added in an effect and removed on unmount) and when the pointer leaves the header.
• The drawer uses the inert attribute while closed so its off-screen links are skipped by the keyboard; a scrim behind it closes the drawer on tap.
• Tree sections collapse with a grid-rows-[0fr] to grid-rows-[1fr] transition keyed by an expanded record in state; the chevron rotates 180 degrees on the open section, and the first section starts open.
• The search trigger is a button styled like an input with the hint from labels.searchHint; wire its onClick to your own command palette.
• Any link inside the drawer closes it on click.