🌐 Nodejs.cn
新建

菜单栏

PreviousNext

桌面应用中常见的视觉持久菜单，可快速访问一致的命令集。

Radix UIBase UI
import {
  Menubar,
  MenubarCheckboxItem,

安装

🌐 Installation

pnpm dlx shadcn@latest add menubar

用法

🌐 Usage

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>

示例

🌐 Examples

复选框

🌐 Checkbox

使用 MenubarCheckboxItem 来切换选项。

🌐 Use MenubarCheckboxItem for toggleable options.

import {
  Menubar,
  MenubarCheckboxItem,

单选框

🌐 Radio

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

🌐 Use MenubarRadioGroup and MenubarRadioItem for single-select options.

"use client"

import * as React from "react"

子菜单

🌐 Submenu

在嵌套菜单中使用 MenubarSub、MenubarSubTrigger 和 MenubarSubContent。

🌐 Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

import {
  Menubar,
  MenubarContent,

带图标

🌐 With Icons

import {
  Menubar,
  MenubarContent,

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

请参阅 Base UI 菜单栏 文档。

🌐 See the Base UI Menubar documentation.