DropdownMenu

ボタンによってトリガーされるアクションや機能のセットなど、ユーザーにメニューを表示します。

vue

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
  DropdownMenuArrow,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuItemIndicator,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuRoot,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from 'radix-vue'

const toggleState = ref(false)
const checkboxOne = ref(false)
const checkboxTwo = ref(false)
const person = ref('pedro')

function handleClick() {
  // eslint-disable-next-line no-alert
  alert('hello!')
}
</script>

<template>
  <DropdownMenuRoot v-model:open="toggleState">
    <DropdownMenuTrigger
      class="rounded-full w-[35px] h-[35px] inline-flex items-center justify-center text-grass11 bg-white shadow-[0_2px_10px] shadow-blackA7 outline-none hover:bg-green3 focus:shadow-[0_0_0_2px] focus:shadow-black"
      aria-label="Customise options"
    >
      <Icon icon="radix-icons:hamburger-menu" />
    </DropdownMenuTrigger>

    <DropdownMenuPortal>
      <DropdownMenuContent
        class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
        :side-offset="5"
      >
        <DropdownMenuItem
          value="New Tab"
          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
          @click="handleClick"
        >
          New Tab
          <div
            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
          >
            ⌘+T
          </div>
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger
            value="more toolsz"
            class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
          >
            More Tools
            <div
              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
            >
              <Icon icon="radix-icons:chevron-right" />
            </div>
          </DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent
              class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
              :side-offset="2"
              :align-offset="-5"
            >
              <DropdownMenuItem
                class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Save Page As…
                <div
                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                >
                  ⌘+S
                </div>
              </DropdownMenuItem>
              <DropdownMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Create Shortcut…
              </DropdownMenuItem>
              <DropdownMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Name Window…
              </DropdownMenuItem>
              <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
              <DropdownMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Developer Tools
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>
        <DropdownMenuItem
          value="New Window"
          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
        >
          New Window
          <div
            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
          >
            ⌘+N
          </div>
        </DropdownMenuItem>
        <DropdownMenuItem
          value="New Private Window"
          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
          disabled
        >
          New Private Window
          <div
            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
          >
            ⇧+⌘+N
          </div>
        </DropdownMenuItem>
        <DropdownMenuSub>
          <DropdownMenuSubTrigger
            value="more tools"
            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none w-full outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
          >
            More Tools
            <div
              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
            >
              <Icon icon="radix-icons:chevron-right" />
            </div>
          </DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent
              class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
              :side-offset="2"
              :align-offset="-5"
            >
              <DropdownMenuItem
                class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Save Page As…
                <div
                  class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                >
                  ⌘+S
                </div>
              </DropdownMenuItem>
              <DropdownMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Create Shortcut…
              </DropdownMenuItem>
              <DropdownMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Name Window…
              </DropdownMenuItem>
              <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
              <DropdownMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Developer Tools
              </DropdownMenuItem>
              <DropdownMenuSub>
                <DropdownMenuSubTrigger
                  value="more toolsz"
                  class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
                >
                  More Tools
                  <div
                    class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                  >
                    <Icon icon="radix-icons:chevron-right" />
                  </div>
                </DropdownMenuSubTrigger>
                <DropdownMenuPortal>
                  <DropdownMenuSubContent
                    class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
                    :side-offset="2"
                    :align-offset="-5"
                  >
                    <DropdownMenuItem
                      class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                    >
                      Save Page As…
                      <div
                        class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                      >
                        ⌘+S
                      </div>
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                    >
                      Create Shortcut…
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                    >
                      Name Window…
                    </DropdownMenuItem>
                    <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
                    <DropdownMenuItem
                      class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                    >
                      Developer Tools
                    </DropdownMenuItem>
                    <DropdownMenuSub>
                      <DropdownMenuSubTrigger
                        value="more toolsz"
                        class="group w-full text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:bg-green9 data-[highlighted]:data-[state=open]:text-green1"
                      >
                        More Tools
                        <div
                          class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                        >
                          <Icon icon="radix-icons:chevron-right" />
                        </div>
                      </DropdownMenuSubTrigger>
                      <DropdownMenuPortal>
                        <DropdownMenuSubContent
                          class="min-w-[220px] outline-none bg-white rounded-md p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade"
                          :side-offset="2"
                          :align-offset="-5"
                        >
                          <DropdownMenuItem
                            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                          >
                            Save Page As…
                            <div
                              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
                            >
                              ⌘+S
                            </div>
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                          >
                            Create Shortcut…
                          </DropdownMenuItem>
                          <DropdownMenuItem
                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                          >
                            Name Window…
                          </DropdownMenuItem>
                          <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
                          <DropdownMenuItem
                            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
                          >
                            Developer Tools
                          </DropdownMenuItem>
                        </DropdownMenuSubContent>
                      </DropdownMenuPortal>
                    </DropdownMenuSub>
                  </DropdownMenuSubContent>
                </DropdownMenuPortal>
              </DropdownMenuSub>
              <DropdownMenuItem
                class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              >
                Developer Tools
              </DropdownMenuItem>
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>
        <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />
        <DropdownMenuCheckboxItem
          v-model:checked="checkboxOne"
          class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
        >
          <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
            <Icon icon="radix-icons:check" />
          </DropdownMenuItemIndicator>
          Show Bookmarks
          <div
            class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
          >
            ⌘+B
          </div>
        </DropdownMenuCheckboxItem>
        <DropdownMenuCheckboxItem
          v-model:checked="checkboxTwo"
          class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
        >
          <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
            <Icon icon="radix-icons:check" />
          </DropdownMenuItemIndicator>
          Show Full URLs
        </DropdownMenuCheckboxItem>
        <DropdownMenuSeparator class="h-[1px] bg-green6 m-[5px]" />

        <DropdownMenuLabel class="pl-[25px] text-xs leading-[25px] text-mauve11">
          People
        </DropdownMenuLabel>
        <DropdownMenuRadioGroup v-model="person">
          <DropdownMenuRadioItem
            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
            value="pedro"
          >
            <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
              <Icon icon="radix-icons:dot-filled" />
            </DropdownMenuItemIndicator>
            Pedro Duarte
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem
            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
            value="colm"
          >
            <DropdownMenuItemIndicator class="absolute left-0 w-[25px] inline-flex items-center justify-center">
              <Icon icon="radix-icons:dot-filled" />
            </DropdownMenuItemIndicator>
            Colm Tuite
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
        <DropdownMenuArrow class="fill-white" />
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

機能

制御可能または非制御可能です。
設定可能な読み取り方向でサブメニューをサポートします。
アイテム、ラベル、アイテムのグループをサポートします。
オプションの不確定状態を持つ、チェック可能なアイテム（シングルまたは複数）をサポートします。
モーダルモードと非モーダルモードをサポートします。
サイド、配置、オフセット、衝突処理をカスタマイズできます。
指し示す矢印をオプションでレンダリングできます。
フォーカスは完全に管理されています。
完全なキーボードナビゲーション。
タイプヘッドサポート。
閉じるときの動作とレイヤリング動作は高度にカスタマイズ可能です。

インストール

コマンドラインからコンポーネントをインストールします。

$ npm add radix-vue

構成

すべての部品をインポートして組み合わせてください。

vue

<script setup lang="ts">
import {
  DropdownMenuArrow,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuItemIndicator,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuRoot,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger />

    <DropdownMenuPortal>
      <DropdownMenuContent>
        <DropdownMenuLabel />
        <DropdownMenuItem />

        <DropdownMenuGroup>
          <DropdownMenuItem />
        </DropdownMenuGroup>

        <DropdownMenuCheckboxItem>
          <DropdownMenuItemIndicator />
        </DropdownMenuCheckboxItem>

        <DropdownMenuRadioGroup>
          <DropdownMenuRadioItem>
            <DropdownMenuItemIndicator />
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>

        <DropdownMenuSub>
          <DropdownMenuSubTrigger />
          <DropdownMenuPortal>
            <DropdownMenuSubContent />
          </DropdownMenuPortal>
        </DropdownMenuSub>

        <DropdownMenuSeparator />
        <DropdownMenuArrow />
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

APIリファレンス

ルート

ドロップダウンメニューのすべての部分を格納します。

プロップ	デフォルト	タイプ
`defaultOpen`		`boolean` 最初にレンダリングされたときのドロップダウンメニューのオープン状態。オープン状態を制御する必要がない場合に使用します。
`dir`		`'ltr' \| 'rtl'` 該当する場合は、コンボボックスの読み取り方向。省略した場合は、`ConfigProvider`からグローバルに継承するか、LTR（左から右）の読み取りモードを想定します。
`modal`	`true`	`boolean` ドロップダウンメニューのモーダル性。 `true`に設定すると、外部要素とのインタラクションが無効になり、スクリーンリーダーにはメニューコンテンツのみが表示されます。
`open`		`boolean` メニューの制御されたオープン状態。`v-model:open`として使用できます。

Emit	ペイロード
`update:open`	`[payload: boolean]` サブメニューのオープン状態が変更されたときに呼び出されるイベントハンドラ。

スロット (デフォルト)	ペイロード
`open`	`boolean` 現在のオープン状態

トリガー

ドロップダウンメニューを切り替えるボタン。デフォルトでは、`DropdownMenuContent`はトリガーに対して自身を配置します。

プロップ	デフォルト	タイプ
`as`	`'button'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`disabled`		`boolean` `true`の場合、ユーザーがアイテムと対話することを防ぎます。

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	無効な場合に表示されます。

ポータル

使用すると、コンテンツ部分を`body`にポータルします。

プロップ	デフォルト	タイプ
`disabled`		`boolean` テレポートを無効にして、コンポーネントをインラインでレンダリングします。 reference
`forceMount`		`boolean` より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。
`to`		`string \| HTMLElement` Vueネイティブテレポートコンポーネントプロップ`:to` reference

コンテンツ

ドロップダウンメニューが開いているときにポップアップするコンポーネント。

プロップ	デフォルト	タイプ
`align`		`'start' \| 'center' \| 'end'` トリガーに対する優先される配置。衝突が発生すると変更される可能性があります。
`alignOffset`		`number` `start`または`end`の配置オプションからのピクセル単位のオフセット。
`arrowPadding`		`number` 矢印とコンテンツの端の間のパディング。コンテンツにborder-radiusがある場合、これにより角がオーバーフローするのを防ぎます。
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`avoidCollisions`		`boolean` `true`の場合、境界線との衝突を防ぐために、サイドと配置の設定を上書きします。
`collisionBoundary`		`Element \| (Element \| null)[] \| null` 衝突境界として使用される要素。デフォルトではビューポートですが、このチェックに含める追加の要素を提供できます。
`collisionPadding`		`number \| Partial<Record<'top' \| 'right' \| 'bottom' \| 'left', number>>` 境界線の端から衝突検出が発生する距離（ピクセル単位）。数値（すべての辺で同じ）、または部分的なパディングオブジェクトを受け入れます。例：{ top: 20, left: 20 }。
`forceMount`		`boolean` より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。
`hideWhenDetached`		`boolean` トリガーが完全に隠されたときにコンテンツを非表示にするかどうか。
`loop`		`boolean` `true`の場合、キーボードナビゲーションは最後のアイテムから最初のアイテムへ、その逆もループします。
`prioritizePosition`		`boolean` コンテンツをビューポート内に強制的に配置します。参照要素と重なる可能性があり、望ましくない場合があります。
`side`		`'top' \| 'right' \| 'bottom' \| 'left'` 開いているときにレンダリングするトリガーの優先される側。衝突が発生し、avoidCollisionsが有効になっている場合に反転されます。
`sideOffset`		`number` トリガーからの距離（ピクセル単位）。
`sticky`		`'partial' \| 'always'` 配置軸のスティッキーな動作。`partial`は、トリガーが少なくとも部分的に境界内にある限り、コンテンツを境界内に維持しますが、「always」はトリガーに関わらず、コンテンツを境界内に維持します。
`updatePositionStrategy`		`'always' \| 'optimized'` すべてのアニメーションフレームでフローティング要素の位置を更新する戦略。

Emit	ペイロード
`closeAutoFocus`	`[event: Event]` 閉じるときに自動フォーカスを行う際に呼び出されるイベントハンドラ。防止できます。
`escapeKeyDown`	`[event: KeyboardEvent]` Escapeキーが押されたときに呼び出されるイベントハンドラ。防止できます。
`focusOutside`	`[event: FocusOutsideEvent]` `DismissableLayer`の外にフォーカスが移動したときに呼び出されるイベントハンドラ。防止できます。
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]` `DismissableLayer`の外でインタラクションが発生したときに呼び出されるイベントハンドラ。具体的には、外側で`pointerdown`イベントが発生した場合、またはその外側にフォーカスが移動した場合です。防止できます。
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` `DismissableLayer`の外側で`pointerdown`イベントが発生したときに呼び出されるイベントハンドラ。防止できます。

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`
`[data-orientation]`	`"vertical" \| "horizontal"`

CSS変数	説明
`--radix-dropdown-menu-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された`transform-origin`。
`--radix-dropdown-menu-content-available-width`	トリガーと境界線の端の間の残りの幅。
`--radix-dropdown-menu-content-available-height`	トリガーと境界線の端の間の残りの高さ。
`--radix-dropdown-menu-trigger-width`	トリガーの幅。
`--radix-dropdown-menu-trigger-height`	トリガーの高さ。

矢印

ドロップダウンメニューと一緒にレンダリングするためのオプションの矢印要素。これを使用して、トリガーと`DropdownMenuContent`を視覚的にリンクさせることができます。`DropdownMenuContent`内にレンダリングする必要があります。

プロップ	デフォルト	タイプ
`as`	`'svg'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`height`	`5`	`number` 矢印の高さをピクセル単位で指定します。
`width`	`10`	`number` 矢印の幅をピクセル単位で指定します。

アイテム

ドロップダウンメニュー項目を含むコンポーネント。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`disabled`		`boolean` `true`の場合、ユーザーによる項目とのインタラクションを阻止します。
`textValue`		`文字列` タイピング補助目的で使用されるオプションのテキスト。デフォルトでは、タイピング補助の動作は項目の`.textContent`を使用します。コンテンツが複雑である場合、またはテキスト以外のコンテンツが含まれる場合に使用します。

Emit	ペイロード
`select`	`[event: Event]` ユーザーが項目を選択した（マウスまたはキーボードによる）時に呼び出されるイベントハンドラー。このハンドラーで`event.preventDefault`を呼び出すと、その項目を選択したときにメニューが閉じることがなくなります。

データ属性	値
`[data-orientation]`	`"vertical" \| "horizontal"`
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効な場合に表示されます。

グループ

複数のDropdownMenuItemをグループ化するために使用します。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。

ラベル

ラベルを表示するために使用します。矢印キーではフォーカスできません。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。

チェックボックス項目

チェックボックスのように制御およびレンダリングできる項目。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`checked`		`false \| true \| 'indeterminate'` 項目の制御されたチェック状態。`v-model:checked`として使用できます。
`disabled`		`boolean` `true`の場合、ユーザーによる項目とのインタラクションを阻止します。
`textValue`		`文字列` タイピング補助目的で使用されるオプションのテキスト。デフォルトでは、タイピング補助の動作は項目の`.textContent`を使用します。コンテンツが複雑である場合、またはテキスト以外のコンテンツが含まれる場合に使用します。

Emit	ペイロード
`select`	`[event: Event]` ユーザーが項目を選択した（マウスまたはキーボードによる）時に呼び出されるイベントハンドラー。このハンドラーで`event.preventDefault`を呼び出すと、その項目を選択したときにメニューが閉じることがなくなります。
`update:checked`	`[payload: boolean]` チェック状態が変更されたときに呼び出されるイベントハンドラー。

データ属性	値
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効な場合に表示されます。

ラジオグループ

複数のDropdownMenuRadioItemをグループ化するために使用します。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`modelValue`		`文字列` グループ内で選択された項目の値。

Emit	ペイロード
`update:modelValue`	`[payload: 文字列]` 値が変更されたときに呼び出されるイベントハンドラー。

ラジオボタン項目

ラジオボタンのように制御およびレンダリングできる項目。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`disabled`		`boolean` `true`の場合、ユーザーによる項目とのインタラクションを阻止します。
`textValue`		`文字列` タイピング補助目的で使用されるオプションのテキスト。デフォルトでは、タイピング補助の動作は項目の`.textContent`を使用します。コンテンツが複雑である場合、またはテキスト以外のコンテンツが含まれる場合に使用します。
`value*`		`文字列` 項目の一意の値。

Emit	ペイロード
`select`	`[event: Event]` ユーザーが項目を選択した（マウスまたはキーボードによる）時に呼び出されるイベントハンドラー。このハンドラーで`event.preventDefault`を呼び出すと、その項目を選択したときにメニューが閉じることがなくなります。

データ属性	値
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効な場合に表示されます。

項目インジケーター

親のDropdownMenuCheckboxItemまたはDropdownMenuRadioItemがチェックされている場合にレンダリングされます。この要素を直接スタイル設定したり、アイコンを配置するためのラッパーとして使用したり、両方を使用したりできます。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`forceMount`		`boolean` より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。

データ属性	値
`[data-state]`	`"checked" \| "unchecked" \| "indeterminate"`

セパレーター

ドロップダウンメニュー内の項目を視覚的に区切るために使用します。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。

サブメニュー

サブメニューのすべての部分を含みます。

プロップ	デフォルト	タイプ
`defaultOpen`		`boolean` 最初にレンダリングされたときのドロップダウンメニューのオープン状態。オープン状態を制御する必要がない場合に使用します。
`open`		`boolean` メニューの制御されたオープン状態。`v-model:open`として使用できます。

Emit	ペイロード
`update:open`	`[payload: boolean]` サブメニューのオープン状態が変更されたときに呼び出されるイベントハンドラ。

スロット (デフォルト)	ペイロード
`open`	`boolean` 現在のオープン状態

サブメニュートリガー

サブメニューを開く項目。DropdownMenuSub内にレンダリングする必要があります。

プロップ	デフォルト	タイプ
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`disabled`		`boolean` `true`の場合、ユーザーによる項目とのインタラクションを阻止します。
`textValue`		`文字列` タイピング補助目的で使用されるオプションのテキスト。デフォルトでは、タイピング補助の動作は項目の`.textContent`を使用します。コンテンツが複雑である場合、またはテキスト以外のコンテンツが含まれる場合に使用します。

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-highlighted]`	ハイライト表示されている場合に存在します。
`[data-disabled]`	無効な場合に表示されます。

CSS変数	説明
`--radix-dropdown-menu-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された`transform-origin`。
`--radix-dropdown-menu-content-available-width`	トリガーと境界線の端の間の残りの幅。
`--radix-dropdown-menu-content-available-height`	トリガーと境界線の端の間の残りの高さ。
`--radix-dropdown-menu-trigger-width`	トリガーの幅。
`--radix-dropdown-menu-trigger-height`	トリガーの高さ。

サブメニューコンテンツ

サブメニューが開いているときに表示されるコンポーネント。DropdownMenuSub内にレンダリングする必要があります。

プロップ	デフォルト	タイプ
`alignOffset`		`number` `start`または`end`の配置オプションからのピクセル単位のオフセット。
`arrowPadding`		`number` 矢印とコンテンツの端の間のパディング。コンテンツにborder-radiusがある場合、これにより角がオーバーフローするのを防ぎます。
`as`	`'div'`	`AsTag \| Component` このコンポーネントがレンダリングされる要素またはコンポーネント。`asChild`で上書きできます。
`asChild`		`boolean` 子として渡されたものに対して、デフォルトでレンダリングされた要素を変更し、そのプロップと動作をマージします。詳細については、コンポジションガイドを参照してください。
`avoidCollisions`		`boolean` `true`の場合、境界線との衝突を防ぐために、サイドと配置の設定を上書きします。
`collisionBoundary`		`Element \| (Element \| null)[] \| null` 衝突境界として使用される要素。デフォルトではビューポートですが、このチェックに含める追加の要素を提供できます。
`collisionPadding`		`number \| Partial<Record<'top' \| 'right' \| 'bottom' \| 'left', number>>` 境界線の端から衝突検出が発生する距離（ピクセル単位）。数値（すべての辺で同じ）、または部分的なパディングオブジェクトを受け入れます。例：{ top: 20, left: 20 }。
`forceMount`		`boolean` より多くの制御が必要な場合にマウントを強制するために使用されます。Vueアニメーションライブラリでアニメーションを制御する場合に便利です。
`hideWhenDetached`		`boolean` トリガーが完全に隠されたときにコンテンツを非表示にするかどうか。
`loop`		`boolean` `true`の場合、キーボードナビゲーションは最後のアイテムから最初のアイテムへ、その逆もループします。
`prioritizePosition`		`boolean` コンテンツをビューポート内に強制的に配置します。参照要素と重なる可能性があり、望ましくない場合があります。
`sideOffset`		`number` トリガーからの距離（ピクセル単位）。
`sticky`		`'partial' \| 'always'` 配置軸のスティッキーな動作。`partial`は、トリガーが少なくとも部分的に境界内にある限り、コンテンツを境界内に維持しますが、「always」はトリガーに関わらず、コンテンツを境界内に維持します。
`updatePositionStrategy`		`'always' \| 'optimized'` すべてのアニメーションフレームでフローティング要素の位置を更新する戦略。

Emit	ペイロード
`closeAutoFocus`	`[event: Event]` 閉じるときに自動フォーカスを行う際に呼び出されるイベントハンドラ。防止できます。
`entryFocus`	`[event: Event]`
`escapeKeyDown`	`[event: KeyboardEvent]` Escapeキーが押されたときに呼び出されるイベントハンドラ。防止できます。
`focusOutside`	`[event: FocusOutsideEvent]` `DismissableLayer`の外にフォーカスが移動したときに呼び出されるイベントハンドラ。防止できます。
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]` `DismissableLayer`の外でインタラクションが発生したときに呼び出されるイベントハンドラ。具体的には、外側で`pointerdown`イベントが発生した場合、またはその外側にフォーカスが移動した場合です。防止できます。
`openAutoFocus`	`[event: Event]` 自動フォーカス時に呼び出されるイベントハンドラー。阻止できます。
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` `DismissableLayer`の外側で`pointerdown`イベントが発生したときに呼び出されるイベントハンドラ。防止できます。

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`
`[data-orientation]`	`"vertical" \| "horizontal"`

例

サブメニュー付き

DropdownMenuSubとそのパーツを組み合わせてサブメニューを作成できます。

vue

<script setup lang="ts">
import {
  DropdownMenuArrow,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuRoot,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent>
        <DropdownMenuItem>…</DropdownMenuItem>
        <DropdownMenuItem>…</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger>Sub menu →</DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent>
              <DropdownMenuItem>Sub menu item</DropdownMenuItem>
              <DropdownMenuItem>Sub menu item</DropdownMenuItem>
              <DropdownMenuArrow />
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>
        <DropdownMenuSeparator />
        <DropdownMenuItem>…</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

無効な項目付き

data-disabled属性を使用して、無効な項目に特別なスタイルを追加できます。

vue

<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuRoot,
  DropdownMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent>
        <DropdownMenuItem
          class="DropdownMenuItem"
          disabled
        >
          …
        </DropdownMenuItem>
        <DropdownMenuItem class="DropdownMenuItem">
          …
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

css

/* styles.css */
.DropdownMenuItem[data-disabled] {
  color: gainsboro;
}

セパレーター付き

Separatorパーツを使用して、項目間にセパレーターを追加します。

vue

<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuRoot,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent>
        <DropdownMenuItem>…</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>…</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>…</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

ラベル付き

Labelパーツを使用して、セクションにラベルを付けます。

vue

<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRoot,
  DropdownMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent>
        <DropdownMenuLabel>Label</DropdownMenuLabel>
        <DropdownMenuItem>…</DropdownMenuItem>
        <DropdownMenuItem>…</DropdownMenuItem>
        <DropdownMenuItem>…</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

チェックボックス項目付き

CheckboxItemパーツを使用して、チェックできる項目を追加します。

vue

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuItemIndicator,
  DropdownMenuPortal,
  DropdownMenuRoot,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from 'radix-vue'

const checked = ref(false)
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent>
        <DropdownMenuItem>…</DropdownMenuItem>
        <DropdownMenuItem>…</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuCheckboxItem v-model:checked="checked">
          <DropdownMenuItemIndicator>
            <Icon icon="radix-icons:check" />
          </DropdownMenuItemIndicator>
          Checkbox item
        </DropdownMenuCheckboxItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

ラジオボタン項目付き

RadioGroupおよびRadioItemパーツを使用して、他の項目の中からチェックできる項目を追加します。

vue

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
  DropdownMenuContent,
  DropdownMenuItemIndicator,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuRoot,
  DropdownMenuTrigger,
} from 'radix-vue'

const color = ref(false)
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent>
        <DropdownMenuRadioGroup v-model="color">
          <DropdownMenuRadioItem value="red">
            <DropdownMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </DropdownMenuItemIndicator>
            Red
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="blue">
            <DropdownMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </DropdownMenuItemIndicator>
            Blue
          </DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="green">
            <DropdownMenuItemIndicator>
              <Icon icon="radix-icons:check" />
            </DropdownMenuItemIndicator>
            Green
          </DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

複雑な項目付き

Itemパーツに画像などの追加の装飾要素を追加できます。

vue

<script setup lang="ts">
import {
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuRoot,
  DropdownMenuTrigger,
} from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent>
        <DropdownMenuItem>
          <img src="…">
          Adolfo Hess
        </DropdownMenuItem>
        <DropdownMenuItem>
          <img src="…">
          Miyah Myles
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

コンテンツ/サブコンテンツのサイズを制限する

コンテンツ（またはサブコンテンツ）の幅をトリガー（またはサブトリガー）の幅に合わせて制限したり、高さをビューポートを超えないように制限したりする場合があります。

これをサポートするために、--radix-dropdown-menu-trigger-widthや--radix-dropdown-menu-content-available-heightなどのいくつかのCSSカスタムプロパティを提供しています。これらを使用して、コンテンツの寸法を制限します。

vue

<script setup lang="ts">
import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent
        class="DropdownMenuContent"
        :side-offset="5"
      >
        …
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

css

/* styles.css */
.DropdownMenuContent {
  width: var(--radix-dropdown-menu-trigger-width);
  max-height: var(--radix-dropdown-menu-content-available-height);
}

起点に合わせたアニメーション

CSSカスタムプロパティ--radix-dropdown-menu-content-transform-originを提供しています。これを使用して、side、sideOffset、align、alignOffset、および衝突に基づいて計算された起点からコンテンツをアニメーション化します。

vue

<script setup lang="ts">
import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent class="DropdownMenuContent">
        …
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

css

/* styles.css */
.DropdownMenuContent {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
  animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

衝突を考慮したアニメーション

data-sideおよびdata-align属性を提供しています。これらの値は、実行時に衝突を反映するように変更されます。これらを使用して、衝突と方向を考慮したアニメーションを作成します。

vue

<script setup lang="ts">
import { DropdownMenuContent, DropdownMenuPortal, DropdownMenuRoot, DropdownMenuTrigger } from 'radix-vue'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>…</DropdownMenuTrigger>
    <DropdownMenuPortal>
      <DropdownMenuContent class="DropdownMenuContent">
        …
      </DropdownMenuContent>
    </DropdownMenuPortal>
  </DropdownMenuRoot>
</template>

css

/* styles.css */
.DropdownMenuContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.DropdownMenuContent[data-side="top"] {
  animation-name: slideUp;
}
.DropdownMenuContent[data-side="bottom"] {
  animation-name: slideDown;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

アクセシビリティ

メニューボタンWAI-ARIAデザインパターンに準拠し、ロービングtabIndexを使用して、メニュー項目間のフォーカス移動を管理します。

キーボード操作

キー	説明
`スペース`	`DropdownMenuTrigger`にフォーカスがある場合、ドロップダウンメニューを開き、最初の項目にフォーカスします。項目にフォーカスがある場合、フォーカスされている項目をアクティブにします。
`Enter`	`DropdownMenuTrigger`にフォーカスがある場合、ドロップダウンメニューを開き、最初の項目にフォーカスします。項目にフォーカスがある場合、フォーカスされている項目をアクティブにします。
`下矢印`	`DropdownMenuTrigger`にフォーカスがある場合、ドロップダウンメニューを開きます。項目にフォーカスがある場合、次の項目にフォーカスを移動します。
`上矢印`	項目にフォーカスがある場合、前の項目にフォーカスを移動します。
`右矢印左矢印`	`DropdownMenuSubTrigger`にフォーカスがある場合、読み取り方向に応じてサブメニューを開いたり閉じたりします。
`Esc`	ドロップダウンメニューを閉じ、フォーカスを`DropdownMenuTrigger`に移動します。

カスタムAPI

プリミティブなパーツを独自のコンポーネントに抽象化することで、独自のAPIを作成します。

矢印と項目インジケーターを抽象化する

この例では、DropdownMenuArrowとDropdownMenuItemIndicatorのパーツを抽象化しています。また、CheckboxItemとRadioItemの実装の詳細もラップしています。

使用方法

vue

<script setup lang="ts">
import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from './your-dropdown-menu'
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger>DropdownMenu trigger</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Item</DropdownMenuItem>
      <DropdownMenuLabel>Label</DropdownMenuLabel>
      <DropdownMenuGroup>Group</DropdownMenuGroup>
      <DropdownMenuCheckboxItem>CheckboxItem</DropdownMenuCheckboxItem>
      <DropdownMenuSeparator>Separator</DropdownMenuSeparator>
      <DropdownMenuRadioGroup>
        <DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
        <DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

実装

// your-dropdown-menu.ts
export { default as DropdownMenuContent } from 'DropdownMenuContent.vue'
export { default as DropdownMenuCheckboxItem } from 'DropdownMenuCheckboxItem.vue'
export { default as DropdownMenuRadioItem } from 'DropdownMenuRadioItem.vue'

export {
  DropdownMenuRoot as DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuGroup,
  DropdownMenuRadioGroup,
  DropdownMenuSeparator
} from 'radix-vue'

vue

<!-- DropdownMenuContent.vue -->
<script setup lang="ts">
import { DropdownMenuContent, type DropdownMenuContentEmits, type DropdownMenuContentProps, DropdownMenuPortal, useForwardPropsEmits, } from 'radix-vue'

const props = defineProps<DropdownMenuContentProps>()
const emits = defineEmits<DropdownMenuContentEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuPortal>
    <DropdownMenuContent v-bind="forwarded">
      <slot />
    </DropdownMenuContent>
  </DropdownMenuPortal>
</template>

vue

<!-- DropdownMenuCheckboxItem.vue -->
<script setup lang="ts">
import { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemEmits, type DropdownMenuCheckboxItemProps, DropdownMenuItemIndicator, useForwardPropsEmits } from 'radix-vue'
import { CheckIcon } from '@radix-icons/vue'

const props = defineProps<DropdownMenuCheckboxItemProps>()
const emits = defineEmits<DropdownMenuCheckboxItemEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuCheckboxItem v-bind="forwarded">
    <span>
      <DropdownMenuItemIndicator>
        <CheckIcon />
      </DropdownMenuItemIndicator>
    </span>
    <slot />
  </DropdownMenuCheckboxItem>
</template>

vue

<!-- DropdownMenuRadioItem.vue -->
<script setup lang="ts">
import { DropdownMenuItemIndicator, DropdownMenuRadioItem, type DropdownMenuRadioItemEmits, type DropdownMenuRadioItemProps, useForwardPropsEmits, } from 'radix-vue'
import { DotFilledIcon } from '@radix-icons/vue'

const props = defineProps<DropdownMenuRadioItemProps>()
const emits = defineEmits<DropdownMenuRadioItemEmits>()

const forwarded = useForwardPropsEmits(props, emits)
</script>

<template>
  <DropdownMenuRadioItem v-bind="forwarded">
    <span>
      <DropdownMenuItemIndicator>
        <DotFilledIcon />
      </DropdownMenuItemIndicator>
    </span>
    <slot />
  </DropdownMenuRadioItem>
</template>

DropdownMenu ​

機能 ​

インストール ​

構成 ​

APIリファレンス ​

ルート ​

トリガー ​

ポータル ​

コンテンツ ​

矢印 ​

アイテム ​

グループ ​

ラベル ​

チェックボックス項目 ​

ラジオグループ ​

ラジオボタン項目 ​

項目インジケーター ​

セパレーター ​

サブメニュー ​

サブメニュートリガー ​

サブメニューコンテンツ ​

例 ​

サブメニュー付き ​

無効な項目付き ​

セパレーター付き ​

ラベル付き ​

チェックボックス項目付き ​

ラジオボタン項目付き ​

複雑な項目付き ​

コンテンツ/サブコンテンツのサイズを制限する ​

起点に合わせたアニメーション ​

衝突を考慮したアニメーション ​

アクセシビリティ ​

キーボード操作 ​

カスタムAPI ​

矢印と項目インジケーターを抽象化する ​

使用方法 ​

実装 ​