ナビゲーションと開示@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 リファレンス

アクセシビリティ