109k
新建

菜单栏

上一页下一页

一种在桌面应用程序中常见的视觉持久化菜单，可提供对一组一致命令的快速访问。

Radix UIBase UI
Radix UI - shadcn/ui 组件库
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>File</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          New Tab <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>New Window</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>Share</MenubarItem>
        <MenubarItem>Print</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,

RTL (从右至左)

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

请参阅 Radix UI Menubar 文档。