Menubar

The "File / Edit / View" bar across the top of a desktop app. Once any menu is open, moving the pointer onto a neighbouring menu name switches to it straight away, no extra click. The switch does not close the old panel and open a new one: the same panel slides to its new position on a spring, resizes as it goes, and crossfades its content. The item layer matches the dropdown menu — plain items, checkbox and radio items, submenus, group labels, separators and shortcut hints — and on the keyboard ←/→ move between menus while ↑/↓ move between items.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<Menubar/>

    </div>
  );
}

Installation

Usage

import { Menubar } from "@/components/ui/menubar";

const [lineNumbers, setLineNumbers] = React.useState(true);
const [fontSize, setFontSize] = React.useState("md");

<Menubar>
  <Menubar.Menu value="file">
    <Menubar.Trigger>檔案</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.Item onSelect={() => console.log("新增")}>
        新增
        <Menubar.Shortcut>⌘N</Menubar.Shortcut>
      </Menubar.Item>
      <Menubar.Sub>
        <Menubar.SubTrigger>最近開啟</Menubar.SubTrigger>
        <Menubar.SubContent>
          <Menubar.Item>週會記錄.md</Menubar.Item>
          <Menubar.Item>旅行清單.md</Menubar.Item>
        </Menubar.SubContent>
      </Menubar.Sub>
      <Menubar.Separator />
      <Menubar.Item>匯出為 PDF</Menubar.Item>
    </Menubar.Content>
  </Menubar.Menu>
  <Menubar.Menu value="view">
    <Menubar.Trigger>檢視</Menubar.Trigger>
    <Menubar.Content>
      <Menubar.CheckboxItem checked={lineNumbers} onCheckedChange={setLineNumbers}>
        顯示行號
      </Menubar.CheckboxItem>
      <Menubar.Separator />
      <Menubar.Label inset>字級</Menubar.Label>
      <Menubar.RadioGroup value={fontSize} onValueChange={setFontSize}>
        <Menubar.RadioItem value="sm">小</Menubar.RadioItem>
        <Menubar.RadioItem value="md">中</Menubar.RadioItem>
        <Menubar.RadioItem value="lg">大</Menubar.RadioItem>
      </Menubar.RadioGroup>
    </Menubar.Content>
  </Menubar.Menu>
</Menubar>

Props

Menubar.Menu

Menubar.Trigger

Menubar.Content

Menubar.Item

Menubar.CheckboxItem

Menubar.RadioGroup

Menubar.RadioItem

Menubar.Sub

Menubar.SubTrigger

Menubar.SubContent

Label / Group / Separator / Shortcut

Every part accepts className, merged with cn().

How it works

• Switching: with no menu open, a Trigger opens on click; once one is open, moving the pointer onto another Trigger switches instantly with no delay. Clicking the currently open Trigger again closes it.
• One panel container: switching never plays "old panel out + new panel in". The same container tweens its position and size from the old anchor to below the new Trigger on a spring (switchStiffness/switchDamping) while the content crossfades over duration. Only going from fully closed to open, or open to fully closed, plays the fade + scale-from-95% + 8px slide entrance and exit.
• Positioning: the panel is position: fixed and portaled to body, pinned below the Trigger, start-aligned, 4px away; if it does not fit below and there is more room above it flips upward, and it is pushed back inside the viewport with 8px to spare horizontally. Viewport resizes, scrolling of any ancestor, and Trigger or panel size changes are recomputed with requestAnimationFrame throttling — those recomputes jump straight there instead of springing, so the panel never lags behind its anchor.
• The duration is also written to --wb-menubar-duration; every CSS transition inside the panel reads that variable, so you can override it globally.
• Submenus: expand after resting subDelay ms, anchored to the SubTrigger on the right (flipping left if there is no room); when the pointer heads diagonally to a submenu, a safe triangle made from the exit point and the submenu's two near corners keeps the submenu from closing as the pointer brushes past other items.
• Typeahead: characters typed within 500ms accumulate into a prefix matched against textValue (defaults to the item text, ignoring shortcuts); CJK text matches on the first character.
• Clicking outside the menubar and all panels closes the menu and leaves focus with whatever was clicked.

Accessibility

• The root is role="menubar" with aria-orientation="horizontal"; each Trigger is role="menuitem" with aria-haspopup="menu", aria-expanded and aria-controls
• Triggers use a roving tabindex: the whole menubar is a single Tab stop, ←/→ move between Triggers (loop controls wrapping), Home/End jump to the ends
• With a menu open, ←/→ (focus inside the panel and not on a SubTrigger) switch to the adjacent menu and move focus to its first item
• On a Trigger, ↓/Enter/Space open the menu and focus the first item, ↑ opens it and focuses the last; inside the panel ↑↓ cycle through enabled items, Home/End jump to the ends, Enter/Space select, Escape closes and returns to the Trigger, and Tab closes and lets focus move on naturally
• The panel is role="menu" with aria-orientation="vertical"; items use menuitem, menuitemcheckbox or menuitemradio by kind, and checkbox and radio items carry aria-checked; disabled items carry aria-disabled and are skipped; shortcut hints are hidden from assistive technology
• Submenus are entered with → or Enter and left with ← or Escape, which returns to the SubTrigger
• Typeahead and Enter do nothing while an IME (e.g. Chinese) is composing (isComposing or keyCode 229)
• When the system "reduce motion" setting is on, the panel keeps only its fade (same duration) with no scaling or sliding; switching menus jumps the panel straight to its new position, and the highlight and radio dot snap into place too