KARAKURIDESIGN SYSTEM

Dropdown

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

5
Item Types
3
Sizes
Sub
Nested
Radix
Base

Playground

Preview
bottom
Button
Size
Icon
Radius
Press Effect
Items
Radius
Flush
Items
Side
Align
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="outline"
      rightIcon={<ChevronDown />}>Menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem>Profile</DropdownMenuItem>
    <DropdownMenuItem>Settings</DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem>Log out</DropdownMenuItem>
  </DropdownMenuContent>
</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

DropdownMenuContent

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

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

DropdownMenuItem

disabledundefined
boolean

無効状態

onSelectundefined
(event: Event) => void

選択時のコールバック

insetundefined
boolean

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

Customization

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

幅の変更

<DropdownMenuContent className="w-56">

危険アクションの強調

<DropdownMenuItem className="text-text-error focus:text-text-error">

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

Dropdown vs Select

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

用途

Dropdown: アクションの実行

Select: 値の選択

フォーム連携

Dropdown: なし

Select: name / value 送信可能

選択後の表示

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

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

アイテム種類

Dropdown: Item, Checkbox, Radio, Sub

Select: 単一選択アイテム

ユースケース

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

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

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