# 菜单栏 · JGuang UI

> 适用于桌面式界面的持久操作菜单。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/menubar
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `menubar-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/menubar


## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Install the following dependencies:


```bash
npm install radix-ui
```


### Copy and paste the following code into your project.


[View complete source: components/ui/menubar.tsx](/r/jguang-ui/radix/menubar.json)


### Update the import paths to match your project setup.


## Usage

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

```tsx showLineNumbers
<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>
```

## Composition

Use the following composition to build a `Menubar`:

```text
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
```

## Checkbox

Use `MenubarCheckboxItem` for toggleable options.


> 示例 `menubar-checkbox`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/menubar


## Radio

Use `MenubarRadioGroup` and `MenubarRadioItem` for single-select options.


> 示例 `menubar-radio`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/menubar


## Submenu

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


> 示例 `menubar-submenu`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/menubar


## With Icons


> 示例 `menubar-icons`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/menubar


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> 示例 `menubar-rtl`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/menubar


## API Reference

See the [Radix UI Menubar](https://www.radix-ui.com/docs/primitives/components/menubar#api-reference) documentation.

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt