ドロップダウンDropdownMenuExperimental

ボタンで開くメニュー（アクションや機能の一覧）を表示します。

プレビュー

状態とバリエーション

チェック項目と単一選択

表示設定や密度など、メニュー内で状態を切り替える例です。

アカウントメニュー

ショートカット、区切り、破壊的操作を含むよくあるユーザーメニューです。

スプリットボタン

主操作は左側のボタンに残し、追加操作だけを下向きシェブロンから開きます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
openboolean-開閉状態を外部で制御します。
onOpenChange(open: boolean) => void-開閉状態が変わった時に呼び出されます。
portalContainerHTMLElement | null-プレビュー枠や疑似ブラウザ内に閉じ込めたい場合のポータル先です。
disabledboolean-項目を選択できない状態にします。
DropdownMenuItem.disabledReasonReact.ReactNode-無効な項目に hover / focus / touch で表示する理由です。
DropdownMenuItem.disabledReasonPortalContainerHTMLElement | null-プレビュー枠や疑似ブラウザ内にツールチップを閉じ込める場合のポータル先です。

使い方

import * as React from "react";
import {
  Button,
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@gunjo/ui";

export function ViewSettingsMenu() {
  const [showStatus, setShowStatus] = React.useState(true);
  const [showActivity, setShowActivity] = React.useState(false);
  const [density, setDensity] = React.useState("comfortable");

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">表示設定</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-64">
        <DropdownMenuLabel>表示</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
          ステータスバー
          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          checked={showActivity}
          onCheckedChange={setShowActivity}
        >
          アクティビティバー
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator />
        <DropdownMenuLabel>密度</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={density} onValueChange={setDensity}>
          <DropdownMenuRadioItem value="compact">コンパクト</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="comfortable">標準</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="spacious">ゆったり</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

設計の判断

  • 開く先を指定できるようにする。portalContainer を渡すと、メニューを指定した箱の中に描きます。プレビューの枠や、画面の中に画面を描いている場面で、メニューだけが外に飛び出すのを防ぎます。あらかじめ高さを空けておく代わりに、重ねて出して解いています。
  • 使えない項目に、理由を出せるようにする。disabledReason を渡すと、灰色の項目にツールチップで理由が出ます。焦点の当たる要素で包むので、キーボードからも読めます。
  • 焦点の出入りは Radix に任せる。開いたときに最初の項目へ焦点が移ること、Esc で閉じてトリガーに焦点が戻ることは、土台の Radix DropdownMenu が持っています。GUNJO が足しているのは見た目と、上の2つの口です。三点のボタンに aria-label を付けるのは呼ぶ側の仕事です。

使用コンポーネント

Button

関連コンポーネント

ContextMenuMenubar

いつ・なぜ使うか（UIXHERO）

「いつ・なぜ使うか」の判断は、姉妹サイト UIXHERO の記事で解説しています。

UIコンポーネント: Dropdown Menu