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

    方向キーでメニューを移動します。無効な項目は実行できません。