Lumi UI

菜单栏

为你的应用提供命令和选项的菜单栏。

DocsAPI Reference

安装

pnpm dlx shadcn@latest add @lumi-ui/menubar

组件结构

<Menubar>
 <MenubarMenu>
   <MenubarMenuTrigger />
   <MenubarMenuContent>
     <MenubarMenuItem />
     <MenubarMenuItem>
       <MenubarMenuShortcut />
     </MenubarMenuItem>
     <MenubarMenuSeparator />
     <MenubarMenuGroup>
       <MenubarMenuGroupLabel />
     </MenubarMenuGroup>
     <MenubarMenuRadioGroup>
       <MenubarMenuRadioItemContent />
     </MenubarMenuRadioGroup>
     <MenubarMenuCheckboxItemContent />
     <MenubarMenuSubMenu>
       <MenubarMenuSubMenuTriggerGroup />
       <MenubarMenuSubMenuContent>
         {/* 子菜单项 */}
       </MenubarMenuSubMenuContent>
     </MenubarMenuSubMenu>
   </MenubarMenuContent>
 </MenubarMenu>
</Menubar>

功能特性

配合分组使用

嵌套菜单

配合复选框和单选组

实用示例

自定义菜单栏样式