Menubar

menubar

菜单条 · Base UI menubar 薄包(File/Edit/View 顶层项+下拉) + dogfood Menu 皮肤 + 键盘切换/方向键漫游

用法

基础用法

多个 MenubarMenu 组成横向菜单条，打开一个后悬停即可切换到相邻菜单。

tsx

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>文件</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>新建窗口</MenubarItem>
      <MenubarItem>打开…</MenubarItem>
      <MenubarSeparator />
      <MenubarItem variant="danger">退出</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>编辑</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>撤销</MenubarItem>
      <MenubarItem>重做</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

分组标题

下拉内容里用 MenubarGroupLabel 给一组项加小标题。

tsx

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>编辑</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>撤销</MenubarItem>
      <MenubarSeparator />
      <MenubarGroupLabel>剪贴板</MenubarGroupLabel>
      <MenubarItem>复制</MenubarItem>
      <MenubarItem>粘贴</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

竖向菜单条

orientation="vertical" 将菜单条竖排，适合侧边场景。

tsx

<Menubar orientation="vertical">
  <MenubarMenu>
    <MenubarTrigger>文件</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>新建窗口</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>视图</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>放大</MenubarItem>
      <MenubarItem>缩小</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

何时用

桌面应用式的水平菜单条：多个顶层入口（文件/编辑/视图）各带下拉，方向键可在顶层间漫游、相邻菜单自动接力展开。只有单个触发器弹一组操作用 Menu；站点主导航 mega 面板用 NavigationMenu。

导入

import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarGroup, MenubarGroupLabel } from "@hulianui/ui"

Props

根 Menubar 透传 Base UI Menubar，叠加 className；MenubarMenu/MenubarTrigger 透传 Base UI Menu 对应部件。下拉项部件（Item/Separator/Group/GroupLabel）复用 Menu 皮肤，用法一致（如 MenubarItem 支持 variant="danger"）。

名称	类型	默认	说明
modal	`boolean`	`true`	模态（打开时背景不可交互）
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	菜单条方向
loopFocus	`boolean`	`true`	方向键漫游到末项后回环
disabled	`boolean`	`false`	禁用整条
className	`string`	—	—

MenubarMenu 透传 Base UI Menu.Root（open/defaultOpen/onOpenChange 等）；MenubarTrigger 透传 Menu.Trigger。

Events

MenubarMenu

事件	类型	说明
onOpenChange	`(open: boolean) => void`	顶层菜单展开/收起回调（透传 Base UI `Menu.Root`）

禁忌 / 坑

同 Menu：MenubarGroupLabel 须裹在 MenubarGroup 内，否则打开菜单时抛缺 GroupRootContext。
顶层只放 MenubarTrigger + MenubarContent，菜单项放在 Content 内，别把 MenubarItem 直接挂到 Menubar 上。

Playground

方向

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>文件</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>新建窗口</MenubarItem>
      <MenubarSeparator />
      <MenubarItem variant="danger">退出</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  {/* 更多顶层菜单… */}
</Menubar>

用法

基础用法

多个 MenubarMenu 组成横向菜单条，打开一个后悬停即可切换到相邻菜单。

tsx

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>文件</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>新建窗口</MenubarItem>
      <MenubarItem>打开…</MenubarItem>
      <MenubarSeparator />
      <MenubarItem variant="danger">退出</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>编辑</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>撤销</MenubarItem>
      <MenubarItem>重做</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

分组标题

下拉内容里用 MenubarGroupLabel 给一组项加小标题。

tsx

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>编辑</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>撤销</MenubarItem>
      <MenubarSeparator />
      <MenubarGroupLabel>剪贴板</MenubarGroupLabel>
      <MenubarItem>复制</MenubarItem>
      <MenubarItem>粘贴</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

竖向菜单条

orientation="vertical" 将菜单条竖排，适合侧边场景。

tsx

<Menubar orientation="vertical">
  <MenubarMenu>
    <MenubarTrigger>文件</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>新建窗口</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>视图</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>放大</MenubarItem>
      <MenubarItem>缩小</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Props

名称	类型	默认	说明
modal	`boolean`	`true`	模态（打开时背景不可交互）
orientation	`"horizontal" \| "vertical"`	`"horizontal"`	菜单条方向
loopFocus	`boolean`	`true`	方向键漫游到末项后回环
disabled	`boolean`	`false`	禁用整条
className	`string`	—	—

MenubarMenu 透传 Base UI Menu.Root（open/defaultOpen/onOpenChange 等）；MenubarTrigger 透传 Menu.Trigger。

事件

类型

说明

onOpenChange

(open: boolean) => void

顶层菜单展开/收起回调（透传 Base UI Menu.Root）

Playground

方向

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>文件</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>新建窗口</MenubarItem>
      <MenubarSeparator />
      <MenubarItem variant="danger">退出</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  {/* 更多顶层菜单… */}
</Menubar>

Menubar

用法

基础用法

分组标题

竖向菜单条

何时用

导入

Props

Events

MenubarMenu

禁忌 / 坑

相关

Playground

Menubar

用法

基础用法

分组标题

竖向菜单条

何时用

导入

Props

Events

MenubarMenu

禁忌 / 坑

相关

Playground