7onicDESIGN SYSTEM

Dropdown

Dropdownは、トリガー要素をクリックすると表示されるフローティングメニューです。アクション一覧、チェックボックス、ラジオ選択、サブメニューをサポートします。

5
Item Types
3
Sizes
Sub
Nested
Radix
Base

Playground

プレビュー
bottom
Button
Size
Icon
Radius
Items
Radius
Flush
Items
Side
Align
<DropdownMenu>
  <DropdownMenu.Trigger asChild>
    <Button variant="outline"
  rightIcon={<ChevronDown />} pressEffect={false}>Menu</Button>
  </DropdownMenu.Trigger>
  <DropdownMenu.Content>
    <DropdownMenu.Item>Profile</DropdownMenu.Item>
    <DropdownMenu.Item>Settings</DropdownMenu.Item>
    <DropdownMenu.Separator />
    <DropdownMenu.Item>Log out</DropdownMenu.Item>
  </DropdownMenu.Content>
</DropdownMenu>

Variants

Basic
最もシンプルなメニュー。アクション一覧を表示。
コンテキストメニュー
Label + Group
ラベルとグループで関連アクションを整理。
アカウントメニュー
Checkbox
チェックボックスで複数項目のON/OFF切替。
表示設定、フィルター
Radio
ラジオで排他的な単一選択。
密度、テーマ選択
Submenu
ネストされたサブメニューで階層的なアクション。
共有、エクスポート

Sizes

sm
パディング6px 8px
アイテムフォント12px
md
パディング6px 8px
アイテムフォント13px
lg
パディング10px 12px
アイテムフォント14px

API

Component Structure

DropdownMenu— Radix DropdownMenu
.Trigger.ContentProps.ItemProps.CheckboxItem.RadioGroup.RadioItem.Label.Separator.Group.Sub.SubTrigger.SubContent.Shortcut

Props

DropdownMenu.Content

size"md"
"sm" | "md" | "lg"

メニューアイテムのサイズ

radius"md"
"md" | "lg" | "xl"

コンテンツとアイテムの角丸（Itemは自動計算）

flushfalse
boolean

アイテムをフル幅で表示（内側パディングなし）

side"bottom"
"top" | "right" | "bottom" | "left"

メニューの表示方向

sideOffset4
number

トリガーからの距離 (px)

align"center"
"start" | "center" | "end"

トリガーに対するアライメント

alignOffset0
number

アライメントのオフセット (px)

loopfalse
boolean

キーボードナビゲーションのループ

DropdownMenu.Item

disabledundefined
boolean

無効状態

onSelectundefined
(event: Event) => void

選択時のコールバック

insetundefined
boolean

左に余白を追加（アイコン揃え用）

Customization

classNameでコンテンツやアイテムのスタイルをカスタマイズできます。

幅の変更

<DropdownMenu.Content className="w-56">

危険アクションの強調

<DropdownMenu.Item className="text-text-error focus:text-text-error">

Tip: 各サブコンポーネントはclassNameを受け取り、Tailwindクラスでスタイルを上書きできます。

Anatomy

1
2
Options
3
4
5
Edit
Duplicate
6
Delete
1
Root
コンポーネントルート
2
Trigger
メニューを開くボタン
3
Content
フローティングパネル
4
Item
メニューアイテム
5
Icon
オプションアイコン
6
Separator
区切り線

Best Practices

✓

推奨

  • ✓アクションが3個以上ある場合に使用する
  • ✓関連するアクションはGroupでまとめる
  • ✓破壊的アクションは視覚的に区別する
  • ✓ショートカットキーがあれば表示する
✕

避けるべき

  • ✗メニュー項目を10個以上にしない
  • ✗ナビゲーション用途にはNavを使用
  • ✗サブメニューを2階層以上ネストしない
  • ✗モバイルでは長いメニューを避ける

Accessibility

キーボード操作

Enterメニュー開閉 / アイテム選択
Spaceメニュー開閉 / アイテム選択
↑ ↓アイテム間を移動
→サブメニューを開く
←サブメニューを閉じる
Escapeメニューを閉じる

ARIA属性

  • role="menu" Content自動付与
  • role="menuitem" Item自動付与
  • aria-expanded Trigger状態管理
  • フォーカスインジケーター

Dropdown vs Select

見た目は似ていますが、用途と動作が異なります。適切なコンポーネントを選択してください。

用途

Dropdown: アクションの実行

Select: 値の選択

フォーム連携

Dropdown: なし

Select: name / value 送信可能

選択後の表示

Dropdown: メニューが閉じるだけ

Select: 選択値がトリガーに反映

アイテム種類

Dropdown: Item, Checkbox, Radio, Sub

Select: 単一選択アイテム

ユースケース

Dropdown: コンテキストメニュー、アカウント操作

Select: 国選択、カテゴリー、ソート順

選択の目安： ユーザーが値を選んでフォームに送信する場合は Select を使用してください。クリック時にアクション（編集、削除、共有など）を実行する場合は Dropdown が適切です。