Menubar
A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
Installation
Command
Manual
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
Install the following dependencies:
npm install @base-ui/react
Copy and paste the following code into your project.
View complete source: components/ui/menubar.tsx
Update the import paths to match your project setup.
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>
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
Checkbox
Use MenubarCheckboxItem for toggleable options.
Radio
Use MenubarRadioGroup and MenubarRadioItem for single-select options.
Submenu
Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.
With Icons
RTL
To enable RTL support in JGuang UI, see the RTL configuration guide.
API Reference
See the Base UI Menubar documentation.
Source: components/base/menubar.mdx
Technical documentation for JGuang UI.
Marker标记
Displays an inline status, system note, bordered row, or labeled separator in a conversation.通过紧凑的图形与文字表达即时状态。
Message Scroller消息滚动区
A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.管理长对话中的滚动位置和跳转操作。