导航与展开@neumorphism-ui/menubar

Menubar

Menubar管理焦点移动，现有Dropdown Menu部件管理弹出与选择行为。

@neumorphism-ui/menubar

Registry JSON

预览

就绪

安装

npx shadcn@latest add @neumorphism-ui/menubar

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

Import

"use client";
import * as React from "react";
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem } from "@/components/ui/menubar";

Example

export default function Example() {
  const [visible, setVisible] = React.useState(true);
  const [message, setMessage] = React.useState("就绪");
  return <div><Menubar aria-label="文件"><MenubarMenu><MenubarTrigger>文件</MenubarTrigger><MenubarContent><MenubarItem onClick={() => setMessage("文档已创建")}>新建文档</MenubarItem></MenubarContent></MenubarMenu><MenubarMenu><MenubarTrigger>视图</MenubarTrigger><MenubarContent><MenubarCheckboxItem checked={visible} onCheckedChange={setVisible}>显示状态</MenubarCheckboxItem></MenubarContent></MenubarMenu></Menubar>{visible && <p role="status">{message}</p>}</div>;
}

API 参考

组件	属性	类型	默认值	说明
`Menubar`	`orientation`	`"horizontal" \| "vertical"`	`—`	设置键盘导航方向。
`MenubarTrigger`	`disabled`	`boolean`	`—`	禁用菜单触发器。
`MenubarCheckboxItem`	`checked / onCheckedChange`	`boolean / (checked: boolean) => void`	`—`	可勾选项目的受控状态。

预览

安装

用法

Import

Example

API 参考

无障碍