ドロップダウン（Dropdown / Select）
クリックで開くメニューや選択UI の実装を4つのアプローチで比較。 アクションメニュー・単一選択・複数選択・グループ化・検索など、実践的なユースケースをインタラクティブに確認できます。
Mantine Menu / Select / MultiSelect
Mantine の Menu はアクションメニュー用で、Target / Dropdown のコンポジション API を採用。 Select / MultiSelect はフォーム向けで、グループ化・検索・クリア・最大選択数に対応。 position でメニューの表示位置を細かく制御できる。
Menu.Target / Dropdownposition制御Select / MultiSelectグループ化検索対応
読み込み中...
tsx
'use client';
import { MantineProvider, Menu, Button, Select } from '@mantine/core';
import '@mantine/core/styles.css';
export function MantineDropdownDemo() {
return (
<MantineProvider>
<div className="flex gap-4 flex-wrap">
<Menu>
<Menu.Target>
<Button variant="default">メニュー ▾</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item>プロフィール</Menu.Item>
<Menu.Item>設定</Menu.Item>
<Menu.Divider />
<Menu.Item color="red">ログアウト</Menu.Item>
</Menu.Dropdown>
</Menu>
<Select
placeholder="選択してください"
data={['React', 'Vue', 'Svelte', 'Angular']}
style={{ width: 200 }}
/>
</div>
</MantineProvider>
);
}🤖 AIプロンプトテンプレート
React + Tailwind CSSで、Mantineを使ったドロップダウンメニューを実装してください。 - 使用ライブラリ: @mantine/core の Menu・Select・MultiSelect コンポーネント - Menu.Target と Menu.Dropdown のコンポジション API でアクションメニューを実装 - position prop でメニューの表示位置を制御（bottom-start・top-end など12方向） - Select コンポーネントで単一選択フォームを実装（searchable prop で検索対応） - MultiSelect コンポーネントで複数選択フォームを実装（maxValues で最大選択数を制限） - group キーでアイテムのグループ化を実現 - クリア機能（clearable prop）とデフォルト値の設定
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
ライブラリ比較
| 項目 | Mantine | Ant Design | shadcn/ui | CSS カスタム |
|---|---|---|---|---|
| アクションメニュー | ✅ Menu（Target/Dropdown） | ✅ Dropdown（items配列） | ✅ DropdownMenu（Radix UIベース） | ⚠️ 自作コンポーネント |
| メイン+メニューボタン | ⚠️ 手動で構成 | ✅ Dropdown.Button | ⚠️ 手動で構成 | ⚠️ 手動で構成 |
| trigger（hover/click） | ✅ trigger prop | ✅ trigger prop（配列） | ✅ click（デフォルト） | ⚠️ イベントで自作 |
| 表示位置制御 | ✅ position（12方向） | ✅ placement（8方向） | ✅ side・align props | ⚠️ CSSで固定配置 |
| Selectコンポーネント | ✅ Select / MultiSelect | ✅ Select（mode切替） | ✅ Select（単一選択） | ⚠️ 自作Select |
| 検索（フィルタ） | ✅ searchable prop | ✅ showSearch prop | ⚠️ Comboboxで別途実装 | ⚠️ query stateで自作 |
| グループ化 | ✅ group キー | ✅ options with label | ✅ DropdownMenuGroup | ⚠️ 手動でレンダリング |
| クリック外で閉じる | ✅ 自動 | ✅ 自動 | ✅ 自動（Radix UI） | ✅ useClickOutsideで実装 |
| バンドルサイズ | ⚠️ 中（全体で大） | ⚠️ 中（全体で大） | ✅ 使った分だけ | ✅ ゼロ追加 |
選択のポイント
- Mantine — Menu の Target/Dropdown コンポジション API が直感的で柔軟。 Select / MultiSelect は検索・グループ・maxValues など実用的な機能が揃っており、 Mantine を採用しているプロジェクトなら統一感を保ちながら使いやすい。
- Ant Design — Dropdown.Button でメインアクションとメニューを1コンポーネントに収められる点が便利。 items 配列による宣言的な定義で可読性が高く、danger ・disabled も items レベルで設定できる。 管理画面向けの実装が豊富。
- shadcn/ui — Radix UI ベースでアクセシビリティが高く、キーボード操作・スクリーンリーダー対応が標準装備。 DropdownMenuCheckboxItem や RadioItem など、メニュー内の状態管理も宣言的に書ける。 コードが手元にあるため、スタイルの完全カスタマイズが可能。
- CSS カスタム — デザインを完全にコントロールしたい場合や外部ライブラリを避けたい場合に最適。 useClickOutside・検索フィルタ・アニメーションをすべて自前実装するため学習コストはあるが、 デザインシステムへの完全準拠・軽量化を優先する場面では選ぶ価値がある。