ドロップダウン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>
  );
}

使用コンポーネント

Button

関連コンポーネント

ContextMenuMenubar

設計の判断（UIXHERO）

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

UIコンポーネント: Dropdown Menu