メニューバー

デスクトップアプリケーションで一般的な、一貫したコマンドセットへの迅速なアクセスを提供する視覚的に永続的なメニュー。

vue

<script setup lang="ts">
import { Icon } from '@iconify/vue'
import { ref } from 'vue'
import {
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarRoot,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from 'radix-vue'

const currentMenu = ref('')
const checkboxOne = ref(false)
const checkboxTwo = ref(false)
const person = ref('pedro')
function handleClick() {
  // eslint-disable-next-line no-alert
  alert('hello!')
}
</script>

<template>
  <MenubarRoot
    v-model="currentMenu"
    class="flex bg-white p-[3px] rounded-md shadow-[0_2px_10px] shadow-blackA7"
  >
    <MenubarMenu value="file">
      <MenubarTrigger
        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
      >
        File
      </MenubarTrigger>
      <MenubarPortal>
        <MenubarContent
          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)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
          align="start"
          :side-offset="5"
          :align-offset="-3"
        >
          <MenubarItem
            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            New Tab
            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
              ⌘ T
            </div>
          </MenubarItem>
          <MenubarItem
            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            New Window
            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
              ⌘ N
            </div>
          </MenubarItem>
          <MenubarItem
            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
            disabled
          >
            New Incognito Window
          </MenubarItem>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarSub>
            <MenubarSubTrigger
              class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
            >
              Share
              <div
                class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
              >
                <Icon icon="radix-icons:chevron-right" />
              </div>
            </MenubarSubTrigger>
            <MenubarPortal>
              <MenubarSubContent
                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)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
                :align-offset="-5"
              >
                <MenubarItem
                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                >
                  Email Link
                </MenubarItem>
                <MenubarItem
                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                >
                  Messages
                </MenubarItem>
                <MenubarItem
                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                >
                  Notes
                </MenubarItem>
              </MenubarSubContent>
            </MenubarPortal>
          </MenubarSub>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarItem
            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Print…
            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
              ⌘ P
            </div>
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>

    <MenubarMenu value="Edit">
      <MenubarTrigger
        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
      >
        Edit
      </MenubarTrigger>
      <MenubarPortal>
        <MenubarContent
          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)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
          align="start"
          :side-offset="5"
          :align-offset="-3"
        >
          <MenubarItem
            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Undo
            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
              ⌘ Z
            </div>
          </MenubarItem>
          <MenubarItem
            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Redo
            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
              ⇧ ⌘ Z
            </div>
          </MenubarItem>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarSub>
            <MenubarSubTrigger
              class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
            >
              Find
              <div
                class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
              >
                <Icon icon="radix-icons:chevron-right" />
              </div>
            </MenubarSubTrigger>

            <MenubarPortal>
              <MenubarSubContent
                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)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
                :align-offset="-5"
              >
                <MenubarItem
                  class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                >
                  Search the web…
                </MenubarItem>
                <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
                <MenubarItem
                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                >
                  Find…
                </MenubarItem>
                <MenubarItem
                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                >
                  Find Next
                </MenubarItem>
                <MenubarItem
                  class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
                >
                  Find Previous
                </MenubarItem>
              </MenubarSubContent>
            </MenubarPortal>
          </MenubarSub>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarItem
            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Cut
          </MenubarItem>
          <MenubarItem
            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Copy
          </MenubarItem>
          <MenubarItem
            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Paste
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>

    <MenubarMenu value="View">
      <MenubarTrigger
        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
      >
        View
      </MenubarTrigger>
      <MenubarPortal>
        <MenubarContent
          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)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
          align="start"
          :side-offset="5"
          :align-offset="-14"
        >
          <MenubarCheckboxItem
            v-model="checkboxOne"
            class="group text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
          >
            <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
              <Icon icon="radix-icons:check" />
            </MenubarItemIndicator>
            Show Bookmarks
            <div
              class="ml-auto pl-[20px] text-mauve11 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8"
            >
              ⌘+B
            </div>
          </MenubarCheckboxItem>
          <MenubarCheckboxItem
            v-model="checkboxTwo"
            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
          >
            <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
              <Icon icon="radix-icons:check" />
            </MenubarItemIndicator>
            Show Full URLs
          </MenubarCheckboxItem>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarItem
            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Reload
            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
              ⌘ R
            </div>
          </MenubarItem>
          <MenubarItem
            class="group text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
            disabled
          >
            Force Reload
            <div class="ml-auto pl-5 text-mauve9 group-data-[highlighted]:text-white group-data-[disabled]:text-mauve8">
              ⇧ ⌘ R
            </div>
          </MenubarItem>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarItem
            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Toggle Fullscreen
          </MenubarItem>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarItem
            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Hide Sidebar
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>

    <MenubarMenu value="Profiles">
      <MenubarTrigger
        class="py-2 px-3 outline-none select-none font-semibold leading-none rounded text-grass11 text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-green4 data-[state=open]:bg-green4"
      >
        Profiles
      </MenubarTrigger>
      <MenubarPortal>
        <MenubarContent
          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)] [animation-duration:_400ms] [animation-timing-function:_cubic-bezier(0.16,_1,_0.3,_1)] will-change-[transform,opacity]"
          align="start"
          :side-offset="5"
          :align-offset="-14"
        >
          <MenubarRadioGroup v-model="person">
            <MenubarRadioItem
              class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              value="pedro"
            >
              <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
                <Icon icon="radix-icons:dot-filled" />
              </MenubarItemIndicator>
              Pedro Duarte
            </MenubarRadioItem>
            <MenubarRadioItem
              class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[20px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
              value="colm"
            >
              <MenubarItemIndicator class="absolute left-0 w-[20px] inline-flex items-center justify-center">
                <Icon icon="radix-icons:dot-filled" />
              </MenubarItemIndicator>
              Colm Tuite
            </MenubarRadioItem>
          </MenubarRadioGroup>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarItem
            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
            @click="handleClick"
          >
            Edit…
          </MenubarItem>
          <MenubarSeparator class="h-[1px] bg-green6 m-[5px]" />
          <MenubarItem
            class="text-[13px] leading-none text-grass11 rounded flex items-center h-[25px] px-[10px] relative select-none pl-5 outline-none data-[state=open]:bg-green4 data-[state=open]:text-grass11 data-[highlighted]:bg-gradient-to-br data-[highlighted]:from-green9 data-[highlighted]:to-green10 data-[highlighted]:text-green1 data-[highlighted]:data-[state=open]:text-green1 data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none"
          >
            Add Profile…
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

機能

制御付きまたは制御なしにできます。
設定可能な読み取り方向を持つサブメニューをサポートします。
アイテム、ラベル、アイテムのグループをサポートします。
チェック可能なアイテム（単一または複数）をサポートします。
サイド、アライメント、オフセット、衝突処理をカスタマイズします。
オプションでポインティング矢印をレンダリングします。
フォーカスは完全に管理されます。
完全なキーボードナビゲーション。
タイプアヘッドサポート。

インストール

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

$ npm add radix-vue

構造

すべてのパーツをインポートして組み立てます。

vue

<script setup lang="ts">
import {
  MenubarArrow,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarLabel,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarRoot,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from './'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger />
      <MenubarPortal>
        <MenubarContent>
          <MenubarLabel />
          <MenubarItem />

          <MenubarGroup>
            <MenubarItem />
          </MenubarGroup>

          <MenubarCheckboxItem>
            <MenubarItemIndicator />
          </MenubarCheckboxItem>

          <MenubarRadioGroup>
            <MenubarRadioItem>
              <MenubarItemIndicator />
            </MenubarRadioItem>
          </MenubarRadioGroup>

          <MenubarSub>
            <MenubarSubTrigger />
            <MenubarPortal>
              <MenubarSubContent />
            </MenubarPortal>
          </MenubarSub>

          <MenubarSeparator />
          <MenubarArrow />
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

APIリファレンス

ルート

メニューバーのすべてのパーツを含みます

プロパティ	デフォルト	型
`defaultValue`		`string` 最初にレンダリングされたときに開いている必要があるメニューの値。値の状態を制御する必要がない場合に使用します。
`dir`		`'ltr' \| 'rtl'` 該当する場合のコンボボックスの読み取り方向。省略した場合、`ConfigProvider`からグローバルに継承するか、LTR（左から右）の読み取りモードを想定します。
`loop`	`false`	`boolean` `true`の場合、キーボードナビゲーションは最後のアイテムから最初のアイテムに、またその逆にループします。
`modelValue`		`string` 開くメニューの制御された値。`v-model`として使用できます。

エミット	ペイロード
`update:modelValue`	`[value: boolean]` 値が変更されたときに呼び出されるイベントハンドラー。

スロット（デフォルト）	ペイロード
`modelValue`	`string` 現在の入力値

トップレベルのメニュー項目で、コンテンツの組み合わせを持つトリガーが含まれています。

プロパティ	デフォルト	型
`value`		`string` ナビゲーションメニューが制御されている場合に、項目をアクティブな値に関連付ける一意の値。このプロパティは、制御されていない場合は自動的に管理されます。

トリガー

コンテンツを切り替えるボタン。デフォルトでは、MenubarContentはトリガーに対して配置されます。

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

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-highlighted]`	強調表示されている場合に表示
`[data-disabled]`	無効になっている場合に表示

ポータル

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

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

コンテンツ

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

プロパティ	デフォルト	型
`align`	`'start'`	`'start' \| 'center' \| 'end'` トリガーに対する優先アライメント。衝突が発生すると変更される場合があります。
`alignOffset`		`number` `start`または`end`のアライメントオプションからのピクセル単位のオフセット。
`arrowPadding`		`number` 矢印とコンテンツの端の間のパディング。コンテンツにborder-radiusがある場合、コーナーからはみ出るのを防ぎます。
`as`	`'div'`	`AsTag \| コンポーネント` このコンポーネントがレンダリングする要素またはコンポーネント。`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'` すべてのアニメーションフレームでフローティング要素の位置を更新する戦略。

エミット	ペイロード
`closeAutoFocus`	`[event: Event]` クローズ時に自動フォーカスするときに呼び出されるイベントハンドラー。防止できます。
`escapeKeyDown`	`[event: KeyboardEvent]` エスケープキーが押されたときに呼び出されるイベントハンドラー。防止できます。
`focusOutside`	`[event: FocusOutsideEvent]` フォーカスが`DismissableLayer`の外に移動したときに呼び出されるイベントハンドラー。防止できます。
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]` `DismissableLayer`の外でインタラクションが発生したときに呼び出されるイベントハンドラー。具体的には、`pointerdown`イベントが外で発生するか、フォーカスが外に移動した場合です。防止できます。
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` `pointerdown`イベントが`DismissableLayer`の外で発生したときに呼び出されるイベントハンドラー。防止できます。

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

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

矢印

メニューバーメニューに沿ってレンダリングするオプションの矢印要素。これは、トリガーをMenubarContentと視覚的にリンクするのに役立ちます。MenubarContent内でレンダリングする必要があります。

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

項目

メニューバーの項目を格納するコンポーネントです。

プロパティ	デフォルト	型
`as`	`'div'`	`AsTag \| コンポーネント` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます
`asChild`		`boolean` 子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。詳細については、コンポジションガイドをお読みください。
`disabled`		`boolean` `true`の場合、ユーザーが項目を操作できなくなります。
`textValue`		`string` タイプアヘッド機能に使用するオプションのテキストです。デフォルトでは、タイプアヘッド機能は項目の`.textContent`を使用します。コンテンツが複雑な場合や、テキスト以外のコンテンツが含まれる場合に使用します。

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

データ属性	値
`[data-highlighted]`	強調表示されている場合に表示
`[data-disabled]`	無効になっている場合に表示

グループ

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

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

ラベル

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

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

CheckboxItem

チェックボックスのように制御および表示できる項目です。

プロパティ	デフォルト	型
`as`	`'div'`	`AsTag \| コンポーネント` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます
`asChild`		`boolean` 子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。詳細については、コンポジションガイドをお読みください。
`checked`		`false \| true \| 'indeterminate'` 項目の制御されたチェック状態です。`v-model:checked`として使用できます。
`disabled`		`boolean` `true`の場合、ユーザーが項目を操作できなくなります。
`textValue`		`string` タイプアヘッド機能に使用するオプションのテキストです。デフォルトでは、タイプアヘッド機能は項目の`.textContent`を使用します。コンテンツが複雑な場合や、テキスト以外のコンテンツが含まれる場合に使用します。

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

データ属性	値
`[data-state]`	`"checked" \| "unchecked"`
`[data-highlighted]`	強調表示されている場合に表示
`[data-disabled]`	無効になっている場合に表示

RadioGroup

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

プロパティ	デフォルト	型
`as`	`'div'`	`AsTag \| コンポーネント` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます
`asChild`		`boolean` 子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。詳細については、コンポジションガイドをお読みください。
`modelValue`		`string` グループ内で選択された項目の値です。

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

RadioItem

ラジオボタンのように制御および表示できる項目です。

プロパティ	デフォルト	型
`as`	`'div'`	`AsTag \| コンポーネント` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます
`asChild`		`boolean` 子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。詳細については、コンポジションガイドをお読みください。
`disabled`		`boolean` `true`の場合、ユーザーが項目を操作できなくなります。
`textValue`		`string` タイプアヘッド機能に使用するオプションのテキストです。デフォルトでは、タイプアヘッド機能は項目の`.textContent`を使用します。コンテンツが複雑な場合や、テキスト以外のコンテンツが含まれる場合に使用します。
`value*`		`string` 項目の固有の値です。

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

データ属性	値
`[data-state]`	`"checked" \| "unchecked"`
`[data-highlighted]`	強調表示されている場合に表示
`[data-disabled]`	無効になっている場合に表示

ItemIndicator

親のMenubarCheckboxItemまたはMenubarRadioItemがチェックされている場合に表示されます。この要素を直接スタイル設定することも、アイコンを配置するラッパーとして使用することも、両方を行うこともできます。

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

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

Separator

メニューバーメニュー内の項目を視覚的に区切るために使用します。

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

Sub

サブメニューのすべてのパーツを格納します。

プロパティ	デフォルト	型
`defaultOpen`		`boolean` 最初にレンダリングされたときのサブメニューの開閉状態です。開閉状態を制御する必要がない場合に使用します。
`open`		`boolean` メニューの制御された開閉状態です。`v-model:open`として使用できます。

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

スロット（デフォルト）	ペイロード
`open`	`boolean` 現在の開閉状態

SubTrigger

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

プロパティ	デフォルト	型
`as`	`'div'`	`AsTag \| コンポーネント` このコンポーネントがレンダリングする要素またはコンポーネント。`asChild`で上書きできます
`asChild`		`boolean` 子として渡された要素のデフォルトのレンダリング要素を変更し、それらのプロパティと動作をマージします。詳細については、コンポジションガイドをお読みください。
`disabled`		`boolean` `true`の場合、ユーザーが項目を操作できなくなります。
`textValue`		`string` タイプアヘッド機能に使用するオプションのテキストです。デフォルトでは、タイプアヘッド機能は項目の`.textContent`を使用します。コンテンツが複雑な場合や、テキスト以外のコンテンツが含まれる場合に使用します。

データ属性	値
`[data-state]`	`"open" \| "closed"`
`[data-highlighted]`	強調表示されている場合に表示
`[data-disabled]`	無効になっている場合に表示

SubContent

サブメニューが開いたときにポップアウトするコンポーネントです。MenubarSub内でレンダリングする必要があります。

プロパティ	デフォルト	型
`alignOffset`		`number` `start`または`end`のアライメントオプションからのピクセル単位のオフセット。
`arrowPadding`		`number` 矢印とコンテンツの端の間のパディング。コンテンツにborder-radiusがある場合、コーナーからはみ出るのを防ぎます。
`as`	`'div'`	`AsTag \| コンポーネント` このコンポーネントがレンダリングする要素またはコンポーネント。`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'` すべてのアニメーションフレームでフローティング要素の位置を更新する戦略。

エミット	ペイロード
`closeAutoFocus`	`[event: Event]` クローズ時に自動フォーカスするときに呼び出されるイベントハンドラー。防止できます。
`entryFocus`	`[event: Event]` コンテナがフォーカスされているときに呼び出されるイベントハンドラーです。キャンセル可能です。
`escapeKeyDown`	`[event: KeyboardEvent]` エスケープキーが押されたときに呼び出されるイベントハンドラー。防止できます。
`focusOutside`	`[event: FocusOutsideEvent]` フォーカスが`DismissableLayer`の外に移動したときに呼び出されるイベントハンドラー。防止できます。
`interactOutside`	`[event: PointerDownOutsideEvent \| FocusOutsideEvent]` `DismissableLayer`の外でインタラクションが発生したときに呼び出されるイベントハンドラー。具体的には、`pointerdown`イベントが外で発生するか、フォーカスが外に移動した場合です。防止できます。
`openAutoFocus`	`[event: Event]` 開いたときに自動フォーカスされるときに呼び出されるイベントハンドラーです。キャンセル可能です。
`pointerDownOutside`	`[event: PointerDownOutsideEvent]` `pointerdown`イベントが`DismissableLayer`の外で発生したときに呼び出されるイベントハンドラー。防止できます。

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

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

例

サブメニュー付き

MenubarSubをそのパーツと組み合わせて使用することで、サブメニューを作成できます。

vue

<script setup lang="ts">
import {
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarSeparator,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from 'radix-vue'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Sub menu →</MenubarSubTrigger>
            <MenubarPortal>
              <MenubarSubContent>
                <MenubarItem>Sub menu item</MenubarItem>
                <MenubarItem>Sub menu item</MenubarItem>
                <MenubarArrow />
              </MenubarSubContent>
            </MenubarPortal>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>…</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

無効な項目付き

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

vue

<script setup lang="ts">
import { MenubarContent, MenubarItem, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'radix-vue'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem
            class="MenubarItem"
            disabled
          >
            …
          </MenubarItem>
          <MenubarItem class="MenubarItem">
            …
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

css

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

セパレーター付き

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

vue

<script setup lang="ts">
import {
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from 'radix-vue'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>…</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

ラベル付き

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

vue

<script setup lang="ts">
import {
  MenubarContent,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarTrigger,
} from 'radix-vue'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarLabel>Label</MenubarLabel>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

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

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

vue

<script setup lang="ts">
import {
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarMenu,
  MenubarPortal,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from 'radix-vue'
import { Icon } from '@iconify/vue'

const checked = ref(true)
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>…</MenubarItem>
          <MenubarItem>…</MenubarItem>
          <MenubarSeparator />
          <MenubarCheckboxItem v-model:checked="checked">
            <MenubarItemIndicator>
              <Icon icon="radix-icons:check" />
            </MenubarItemIndicator>
            Checkbox item
          </MenubarCheckboxItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

ラジオボタン項目付き

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

vue

<script setup lang="ts">
import {
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarItemIndicator,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarRoot,
  MenubarSeparator,
  MenubarTrigger,
} from 'radix-vue'
import { Icon } from '@iconify/vue'

const color = ref('blue')
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarRadioGroup v-model="color">
            <MenubarRadioItem value="red">
              <MenubarItemIndicator>
                <Icon icon="radix-icons:check" />
              </MenubarItemIndicator>
              Red
            </MenubarRadioItem>
            <MenubarRadioItem value="blue">
              <MenubarItemIndicator>
                <Icon icon="radix-icons:check" />
              </MenubarItemIndicator>
              Blue
            </MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

複雑な項目付き

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

vue

<script setup lang="ts">
import { MenubarContent, MenubarItem, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'radix-vue'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent>
          <MenubarItem>
            <img src="…">
            Adolfo Hess
          </MenubarItem>
          <MenubarItem>
            <img src="…">
            Miyah Myles
          </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

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

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

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

vue

<script setup lang="ts">
import { MenubarContent, MenubarItem, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'radix-vue'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger> Trigger </MenubarTrigger>
      <MenubarPortal>
        <MenubarContent
          class="MenubarContent"
          :side-offset="5"
          :align-offset="-3"
        >
          <MenubarItem> New Tab </MenubarItem>
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

css

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

原点を認識したアニメーション

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

vue

<script setup lang="ts">
import { MenubarContent, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'radix-vue'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent class="MenubarContent">
          …
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

css

/* styles.css */
.MenubarContent {
  transform-origin: var(--radix-menubar-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 { MenubarContent, MenubarMenu, MenubarPortal, MenubarRoot, MenubarTrigger } from 'radix-vue'
</script>

<template>
  <MenubarRoot>
    <MenubarMenu>
      <MenubarTrigger>…</MenubarTrigger>
      <MenubarPortal>
        <MenubarContent class="MenubarContent">
          …
        </MenubarContent>
      </MenubarPortal>
    </MenubarMenu>
  </MenubarRoot>
</template>

css

/* styles.css */
.MenubarContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.MenubarContent[data-side="top"] {
  animation-name: slideUp;
}
.MenubarContent[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デザインパターンに準拠し、メニュー項目間のフォーカス移動を管理するためにロービングタブインデックスを使用します。

キーボード操作

キー	説明
`スペース`	フォーカスが`MenubarTrigger`にある場合、メニューバーを開き、最初の項目にフォーカスします。フォーカスが項目にある場合、フォーカスされた項目をアクティブにします。
`Enter`	フォーカスが`MenubarTrigger`にある場合、関連付けられたメニューを開きます。フォーカスが項目にある場合、フォーカスされた項目をアクティブにします。
`下向き矢印`	フォーカスが`MenubarTrigger`にある場合、関連付けられたメニューを開きます。フォーカスが項目にある場合、フォーカスを次の項目に移動します。
`上向き矢印`	フォーカスが項目にある場合、フォーカスを前の項目に移動します。
`右向き矢印左向き矢印`	フォーカスが`MenubarTrigger`にある場合、フォーカスを次の項目または前の項目に移動します。フォーカスが`MenubarSubTrigger`にある場合、読み取り方向に依存してサブメニューを開閉します。フォーカスが`MenubarContent`内にある場合、メニューバーの次のメニューを開きます。
`Esc`	現在開いているメニューを閉じ、フォーカスをその`MenubarTrigger`に移動します。

メニューバー ​

機能 ​

インストール ​

構造 ​

APIリファレンス ​

ルート ​

メニュー ​

トリガー ​

ポータル ​

コンテンツ ​

矢印 ​

項目 ​

グループ ​

ラベル ​

CheckboxItem ​

RadioGroup ​

RadioItem ​

ItemIndicator ​

Separator ​

Sub ​

SubTrigger ​

SubContent ​

例 ​

サブメニュー付き ​

無効な項目付き ​

セパレーター付き ​

ラベル付き ​

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

ラジオボタン項目付き ​

複雑な項目付き ​

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

原点を認識したアニメーション ​

衝突を認識したアニメーション ​

アクセシビリティ ​

キーボード操作 ​