Account Menu Bar

Navbar109: Account Menu Bar

A compact app bar for a signed-in product: the brand with an environment pill, page links, a status dot with a short system status line, and an initials avatar. The avatar opens an account dropdown with profile, billing, team and sign out. On a phone the same avatar raises a bottom sheet that holds the account, the status and the page links.

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

Base UI flavor

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

This installs the block to components/beste/block/navbar109.tsx; it needs no shadcn primitives.

Quick start

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

import { Navbar109, navbar109Demo } from "@/components/beste/block/navbar109";

export default function Page() {
  return <Navbar109 {...navbar109Demo} />;
}

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

import { Navbar109 } from "@/components/beste/block/navbar109";

export default function Page() {
  return (
    <Navbar109
      brand="Harbor"
      environment="Production"
      links={[
        { label: "Overview", href: "/overview" },
        { label: "Deployments", href: "/deployments" },
        { label: "Logs", href: "/logs" },
      ]}
      status={{ label: "All systems normal", href: "/status" }}
      account={{
        name: "Nina Simone",
        email: "[email protected]",
        initials: "NS",
        items: [
          { label: "Profile", href: "/account", icon: "profile" },
          { label: "Billing", href: "/billing", icon: "billing" },
        ],
        signOut: { label: "Sign out", href: "/sign-out" },
      }}
      labels={{ account: "Account menu", close: "Close", navigation: "Navigate" }}
    />
  );
}

Props

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

type Account = {
  name: string;
  email: string;
  initials: string;
  items: AccountItem[];
  signOut?: NavItem;
};

type AccountItem = {
  label: string;
  href: string;
  icon?: "profile" | "billing" | "team" | "settings";
};

Behavior notes

• The account dropdown, the mobile scrim and the bottom sheet are server-rendered and always in the markup; each is shown or hidden with CSS classes rather than mounted on demand.
• The avatar opens on mouse hover or click; a pointerType check keeps a touch tap from opening and closing it in the same gesture. Below md the dropdown is hidden and the sheet takes over.
• Arrow Down on the avatar opens the dropdown and focuses its first link; inside it Arrow Up and Down cycle the links and Home and End jump to either end.
• Escape closes the menu and, when focus was inside the dropdown, returns it to the avatar; a click outside the header, a tap on the scrim and the pointer leaving the header also close it.
• The status dot uses bg-primary, so it follows the theme rather than a fixed green; swap the class if you want a semantic color.