菜单栏

桌面应用程序中常见的视觉持久菜单，可快速访问一致的命令集。

<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

解剖

导入所有部分并将它们组合在一起。

<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 | Component 此组件应渲染成的元素或组件。可以被 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 箭头与内容边缘之间的填充。如果您的内容有圆角，这将防止它溢出角。
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' 在每个动画帧上更新浮动元素位置的策略。

发射	有效负载
closeAutoFocus	[event: Event] 关闭时自动聚焦时调用的事件处理程序。可以阻止。
escapeKeyDown	[event: KeyboardEvent] 按下转义键时调用的事件处理程序。可以阻止。
focusOutside	[event: FocusOutsideEvent] 焦点移出 DismissableLayer 时调用的事件处理程序。可以阻止。
interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent] 在 DismissableLayer 外发生交互时调用的事件处理程序。具体来说，当 pointerdown 事件发生在 DismissableLayer 外部或焦点移出它时。可以阻止。
pointerDownOutside	[event: PointerDownOutsideEvent] 在 DismissableLayer 外发生 pointerdown 事件时调用的事件处理程序。可以阻止。

数据属性	价值
[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 | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。
高度	5	number 箭头的像素高度。
宽度	10	number 箭头的像素宽度。

Item

包含菜单栏项目的组件。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。
disabled		boolean 当为true时，阻止用户与项目交互。
textValue		string 用于联想输入的可选文本。默认情况下，联想输入行为将使用项目的.textContent。 当内容复杂或内部有非文本内容时使用。

发射	有效负载
select	[event: Event] 当用户选择项目（通过鼠标或键盘）时调用的事件处理程序。 在该处理程序中调用event.preventDefault将阻止在选择该项目时菜单关闭。

数据属性	价值
[data-highlighted]	突出显示时出现
[data-disabled]	禁用时出现

Group

用于将多个MenubarItem分组。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。

Label

用于渲染标签。它将无法使用箭头键获得焦点。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。

CheckboxItem

一个可以像复选框一样控制和渲染的项目。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。
checked		false | true | 'indeterminate' 项目的受控选中状态。可以用作v-model:checked。
disabled		boolean 当为true时，阻止用户与项目交互。
textValue		string 用于联想输入的可选文本。默认情况下，联想输入行为将使用项目的.textContent。 当内容复杂或内部有非文本内容时使用。

发射	有效负载
select	[event: Event] 当用户选择项目（通过鼠标或键盘）时调用的事件处理程序。 在该处理程序中调用event.preventDefault将阻止在选择该项目时菜单关闭。
update:checked	[payload: boolean] 当选中状态改变时调用的事件处理程序。

数据属性	价值
[data-state]	"checked" | "unchecked"
[data-highlighted]	突出显示时出现
[data-disabled]	禁用时出现

RadioGroup

用于将多个MenubarRadioItem分组。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。
modelValue		string 组中选中项目的value。

发射	有效负载
update:modelValue	[payload: string] 值更改时调用的事件处理程序。

RadioItem

一个可以像单选按钮一样控制和渲染的项目。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。
disabled		boolean 当为true时，阻止用户与项目交互。
textValue		string 用于联想输入的可选文本。默认情况下，联想输入行为将使用项目的.textContent。 当内容复杂或内部有非文本内容时使用。
value*		string 项目的唯一value。

发射	有效负载
select	[event: Event] 当用户选择项目（通过鼠标或键盘）时调用的事件处理程序。 在该处理程序中调用event.preventDefault将阻止在选择该项目时菜单关闭。

数据属性	价值
[data-state]	"checked" | "unchecked"
[data-highlighted]	突出显示时出现
[data-disabled]	禁用时出现

ItemIndicator

当父MenubarCheckboxItem或MenubarRadioItem被选中时渲染。可以直接对该元素进行样式设置，也可以将其用作包装器来放置图标，或两者兼而有之。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。
forceMount		boolean 用于在需要更多控制时强制挂载。在使用 Vue 动画库控制动画时很有用。

数据属性	价值
[data-state]	"checked" | "unchecked"

Separator

用于在菜单栏菜单中视觉上分隔项目。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 asChild 覆盖
asChild		boolean 将默认渲染的元素更改为作为子元素传递的元素，合并其道具和行为。 阅读我们的 组合 指南以了解更多详细信息。

Sub

包含子菜单的所有部分。

道具	默认	类型
defaultOpen		boolean 子菜单初始渲染时的打开状态。当不需要控制其打开状态时使用。
open		boolean 菜单的受控打开状态。可以用作v-model:open。

发射	有效负载
update:open	[payload: boolean] 当子菜单的打开状态发生变化时调用的事件处理程序。

插槽（默认）	有效负载
open	boolean 当前打开状态

SubTrigger

一个打开子菜单的项目。必须在MenubarSub中渲染。

道具	默认	类型
as	'div'	AsTag | Component 此组件应渲染成的元素或组件。可以被 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 箭头与内容边缘之间的填充。如果您的内容有圆角，这将防止它溢出角。
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' 在每个动画帧上更新浮动元素位置的策略。

发射	有效负载
closeAutoFocus	[event: Event] 关闭时自动聚焦时调用的事件处理程序。可以阻止。
entryFocus	[event: Event] 当容器被聚焦时调用的事件处理程序。可以被阻止。
escapeKeyDown	[event: KeyboardEvent] 按下转义键时调用的事件处理程序。可以阻止。
focusOutside	[event: FocusOutsideEvent] 焦点移出 DismissableLayer 时调用的事件处理程序。可以阻止。
interactOutside	[event: PointerDownOutsideEvent | FocusOutsideEvent] 在 DismissableLayer 外发生交互时调用的事件处理程序。具体来说，当 pointerdown 事件发生在 DismissableLayer 外部或焦点移出它时。可以阻止。
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"

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	触发器的高度

Examples

With submenus

可以通过将MenubarSub与其各部分结合使用来创建子菜单。

<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>

With disabled items

可以通过data-disabled属性向禁用项目添加特殊样式。

<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>

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

With separators

使用Separator部分在项目之间添加分隔符。

<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>

With labels

使用Label部分来帮助标记一个部分。

<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>

With checkbox items

使用CheckboxItem部分添加可以被选中的项目。

<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>

With radio items

使用RadioGroup和RadioItem部分添加可以在其他项目中被选中的项目。

<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>

With complex items

可以在Item部分添加额外的装饰性元素，例如图像。

<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>

Constrain the content/sub-content size

可能需要限制内容（或子内容）的宽度，使其与触发器（或子触发器）的宽度匹配。也可能需要限制其高度，使其不超过视窗。

公开了一些 CSS 自定义属性，例如--radix-menubar-trigger-width和--radix-menubar-content-available-height，以支持此功能。使用它们来限制内容尺寸。

<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>

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

Origin-aware animations

公开了一个 CSS 自定义属性--radix-menubar-content-transform-origin。使用它根据side、sideOffset、align、alignOffset和任何冲突来从计算出的原点对内容进行动画处理。

<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>

/* 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);
  }
}

Collision-aware animations

公开data-side和data-align属性。它们的value将在运行时更改以反映冲突。使用它们来创建与冲突和方向相关的动画。

<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>

/* 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);
  }
}

Accessibility

遵守Menu Button WAI-ARIA 设计模式并使用roving tabindex来管理菜单项之间的焦点移动。

Keyboard Interactions

Key	描述
Space	当焦点在MenubarTrigger上时，打开菜单栏并将焦点移到第一个项目上。 当焦点在项目上时，激活被聚焦的项目。
Enter	当焦点在MenubarTrigger上时，打开关联的菜单。 当焦点在项目上时，激活被聚焦的项目。
ArrowDown	当焦点在MenubarTrigger上时，打开关联的菜单。 当焦点在项目上时，将焦点移到下一个项目上。
ArrowUp	当焦点在项目上时，将焦点移到上一个项目上。
ArrowRightArrowLeft	当焦点在MenubarTrigger上时，将焦点移到下一个或上一个项目上。 当焦点在MenubarSubTrigger上时，根据阅读方向打开或关闭子菜单。 当焦点在MenubarContent内时，打开菜单栏中的下一个菜单
Esc	关闭当前打开的菜单并将焦点移到其MenubarTrigger上。