Neumorphism UI

Menubar

用于将应用命令归入始终可见的文件、视图等菜单。

预览

文件与视图菜单

从文件菜单显示本地文档创建消息，通过视图菜单的勾选项切换其显示。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/menubar

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

在命名的 Menubar 中放入包含触发器和内容的 MenubarMenu。普通项目连接命令，勾选项目连接应用偏好状态。

"use client";

import { useState } from "react";
import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarMenu, MenubarTrigger } from "@/components/ui/menubar";

export default function Example() {
  const [visible, setVisible] = useState(true);
  return (
    <div>
      <Menubar aria-label="Document menu">
        <MenubarMenu>
          <MenubarTrigger>View</MenubarTrigger>
          <MenubarContent>
            <MenubarCheckboxItem checked={visible} onCheckedChange={setVisible}>Show status</MenubarCheckboxItem>
          </MenubarContent>
        </MenubarMenu>
      </Menubar>
      {visible && <p>All changes saved.</p>}
    </div>
  );
}

API 参考

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

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

无障碍

  • 01

    用于应用命令而非普通页面链接，并为menubar提供名称。

  • 02

    方向键在菜单间移动，禁用项不能执行。