113k
New

菜单栏

PreviousNext

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

Radix UIBase 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>文件</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarItem>
          新建标签页 <MenubarShortcut>⌘T</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>新建窗口</MenubarItem>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarItem>分享</MenubarItem>
        <MenubarItem>打印</MenubarItem>
      </MenubarGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Composition

Use the following composition to build a Menubar:

Menubar
├── MenubarMenu
│   ├── MenubarTrigger
│   └── MenubarContent
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarItem
│       │   └── MenubarItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarCheckboxItem
│       │   └── MenubarCheckboxItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   └── MenubarRadioGroup
│       │       ├── MenubarRadioItem
│       │       └── MenubarRadioItem
│       └── MenubarSub
│           ├── MenubarSubTrigger
│           └── MenubarSubContent
│               └── MenubarGroup
│                   ├── MenubarLabel
│                   ├── MenubarItem
│                   └── MenubarItem
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        └── MenubarGroup
            ├── MenubarLabel
            ├── MenubarItem
            └── MenubarItem

Examples

复选框

使用 MenubarCheckboxItem 处理可切换选项。

import {
  Menubar,
  MenubarCheckboxItem,

单选

使用 MenubarRadioGroup 和 MenubarRadioItem 处理单选项。

"use client"

import * as React from "react"

子菜单

使用 MenubarSub、MenubarSubTrigger 和 MenubarSubContent 创建嵌套菜单。

import {
  Menubar,
  MenubarContent,

带图标

import {
  FileIcon,
  FolderIcon,

RTL

要在 shadcn/ui 中启用 RTL（从右到左）支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

API 参考

查看 Base UI 菜单栏 文档。