Menubar
横贯应用顶部的一排菜单：黑色横条上排列着不填色的斜切块，菜单打开时，对应的斜切块填充强调色。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/menubar示例
Job、View、Help 三个菜单
import { useState } from "react";import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger,} from "@/components/zero/menubar";export default function MenubarDispatch() { const [radio, setRadio] = useState(true); const [sort, setSort] = useState("reward"); return ( <Menubar> <MenubarMenu> <MenubarTrigger>Job</MenubarTrigger> <MenubarContent> <MenubarItem> New job <MenubarShortcut>⌘N</MenubarShortcut> </MenubarItem> <MenubarItem> Take it <MenubarShortcut>⌘T</MenubarShortcut> </MenubarItem> <MenubarSub> <MenubarSubTrigger>Send to</MenubarSubTrigger> <MenubarSubContent> <MenubarItem>Mara</MenubarItem> <MenubarItem>Rui</MenubarItem> </MenubarSubContent> </MenubarSub> <MenubarSeparator /> <MenubarItem danger>Abandon</MenubarItem> </MenubarContent> </MenubarMenu> <MenubarMenu> <MenubarTrigger>View</MenubarTrigger> <MenubarContent> <MenubarCheckboxItem checked={radio} onCheckedChange={setRadio}> Radio on </MenubarCheckboxItem> <MenubarSeparator /> <MenubarRadioGroup value={sort} onValueChange={setSort}> <MenubarRadioItem value="reward">By reward</MenubarRadioItem> <MenubarRadioItem value="distance">By distance</MenubarRadioItem> </MenubarRadioGroup> </MenubarContent> </MenubarMenu> <MenubarMenu> <MenubarTrigger>Help</MenubarTrigger> <MenubarContent> <MenubarItem>Shortcuts</MenubarItem> <MenubarItem>About dispatch</MenubarItem> </MenubarContent> </MenubarMenu> </Menubar> );}行为
打开一个菜单后，指针沿横条移动即可依次打开其他菜单；用方向键在各菜单间切换焦点。每个菜单都是 Dropdown menu，包含菜单项、子菜单、复选与单选菜单项。
属性
MenubarMenu, MenubarTrigger, MenubarContent
另可传入 Base UI Menu.Root 的全部属性。