菜单栏

一种常见于桌面应用程序中视觉上持久的菜单，提供快速访问一组一致命令的功能。

import {
  Menubar,
  MenubarCheckboxItem,

安装


pnpm dlx shadcn@latest add menubar

使用方法

import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>文件</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          新建标签页 <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>新建窗口</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>分享</MenubarItem>
        <MenubarItem>打印</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

示例

复选框

使用 MenubarCheckboxItem 作为可切换选项。

import {
  Menubar,
  MenubarCheckboxItem,

单选框

使用 MenubarRadioGroup 和 MenubarRadioItem 作为单选选项。

"use client"

import * as React from "react"

子菜单

使用 MenubarSub、MenubarSubTrigger 和 MenubarSubContent 实现嵌套菜单。

import {
  Menubar,
  MenubarContent,

带图标

import {
  Menubar,
  MenubarContent,

API 参考

请查阅 Radix UI 菜单栏文档。

标签原生选择框

安装使用方法示例复选框单选框子菜单带图标 API 参考