Vue UI

Appearance

Contribute
View Component Open an issue Edit the component
Special Thanks
Nuxt UI

DropdownMenuContent ​

A menu to display actions when clicking on an element.

Demo ​

This requires the following components to be installed:

This requires the following composables to be installed:

This requires the following utils to be installed:

This requires the following types to be installed:

This requires the following theme to be installed:

Component ​

DropdownMenuContent.vue
vue
<!-- eslint-disable vue/block-tag-newline -->
<script lang="ts">
import type { AvatarProps } from '@/ui/components/Avatar.vue'
import type { DropdownMenuItem, DropdownMenuSlots } from '@/ui/components/DropdownMenu.vue'
import type { KbdProps } from '@/ui/components/Kbd.vue'
import type theme from '@/ui/theme/dropdown-menu'
import type { ArrayOrNested, ComponentConfig, NestedItem } from '@/ui/utils/utils'
import type { DropdownMenuContentEmits as RekaDropdownMenuContentEmits, DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui'
import Avatar from '@/ui/components/Avatar.vue'
import DropdownMenuContent from '@/ui/components/DropdownMenuContent.vue'
import Icon from '@/ui/components/Icon.vue'
import Kbd from '@/ui/components/Kbd.vue'
import Link from '@/ui/components/Link.vue'
import { usePortal } from '@/ui/composables/usePortal'
import { checkIcon, chevronRightIcon, externalIcon, loadingIcon } from '@/ui/icons'
import { get } from '@/ui/utils/get'
import { isArrayOfArray } from '@/ui/utils/is-array-of-array'
import { omit } from '@/ui/utils/omit'
import { pickLinkProps } from '@/ui/utils/pick-link-props'
import { createReusableTemplate, reactiveOmit } from '@vueuse/core'
import { useForwardPropsEmits } from 'reka-ui'
import { DropdownMenu as RekaDropdownMenu } from 'reka-ui/namespaced'
import { computed, toRef } from 'vue'

type DropdownMenu = ComponentConfig<typeof theme>

interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
  items?: T
  portal?: boolean | string | HTMLElement
  sub?: boolean
  labelKey: keyof NestedItem<T>
  class?: any
  ui: { [K in keyof Required<DropdownMenu['slots']>]: (props?: Record<string, any>) => string }
  uiOverride?: DropdownMenu['slots']
}

interface DropdownMenuContentEmits extends RekaDropdownMenuContentEmits {}

type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
  default: (props?: object) => any
}
</script>

<script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
const props = defineProps<DropdownMenuContentProps<T>>()
const emits = defineEmits<DropdownMenuContentEmits>()
const slots = defineSlots<DropdownMenuContentSlots<T>>()

const portalProps = usePortal(toRef(() => props.portal))
const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'class', 'ui', 'uiOverride'), emits)
const proxySlots = omit(slots, ['default'])

const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()

const groups = computed<DropdownMenuItem[][]>(() =>
  props.items?.length
    ? isArrayOfArray(props.items)
      ? props.items
      : [props.items]
    : [],
)
</script>

<template>
  <DefineItemTemplate v-slot="{ item, active, index }">
    <slot :name="((item.slot || 'item') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :index="index">
      <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
        <Icon v-if="item.loading" :name="loadingIcon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, loading: true })" />
        <Icon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, active })" />
        <Avatar v-else-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
      </slot>

      <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof DropdownMenuContentSlots<T>]" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
        <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
          {{ get(item, props.labelKey as string) }}
        </slot>

        <Icon v-if="item.target === '_blank'" :name="externalIcon" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, color: item?.color, active })" />
      </span>

      <span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
          <Icon v-if="item.children?.length" :name="chevronRightIcon" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color, active })" />
          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
            <Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
          </span>
        </slot>

        <RekaDropdownMenu.ItemIndicator as-child>
          <Icon :name="checkIcon" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color })" />
        </RekaDropdownMenu.ItemIndicator>
      </span>
    </slot>
  </DefineItemTemplate>

  <RekaDropdownMenu.Portal v-bind="portalProps">
    <component :is="sub ? RekaDropdownMenu.SubContent : RekaDropdownMenu.Content" :class="props.class" v-bind="contentProps">
      <slot name="content-top" />

      <RekaDropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
          <RekaDropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: uiOverride?.label })">
            <ReuseItemTemplate :item="item" :index="index" />
          </RekaDropdownMenu.Label>
          <RekaDropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: uiOverride?.separator })" />
          <RekaDropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
            <RekaDropdownMenu.SubTrigger
              as="button"
              type="button"
              :disabled="item.disabled"
              :text-value="get(item, props.labelKey as string)"
              :class="ui.item({ class: uiOverride?.item, color: item?.color })"
            >
              <ReuseItemTemplate :item="item" :index="index" />
            </RekaDropdownMenu.SubTrigger>

            <DropdownMenuContent
              sub
              :class="props.class"
              :ui="ui"
              :ui-override="uiOverride"
              :portal="portal"
              :items="(item.children as T)"
              align="start"
              :align-offset="-4"
              :side-offset="3"
              :label-key="labelKey"
              v-bind="item.content"
            >
              <template v-for="(_, name) in proxySlots" #[name]="slotData">
                <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
              </template>
            </DropdownMenuContent>
          </RekaDropdownMenu.Sub>
          <RekaDropdownMenu.CheckboxItem
            v-else-if="item.type === 'checkbox'"
            :model-value="item.checked"
            :disabled="item.disabled"
            :text-value="get(item, props.labelKey as string)"
            :class="ui.item({ class: [uiOverride?.item, item.class], color: item?.color })"
            @update:model-value="item.onUpdateChecked"
            @select="item.onSelect"
          >
            <ReuseItemTemplate :item="item" :index="index" />
          </RekaDropdownMenu.CheckboxItem>
          <RekaDropdownMenu.Item
            v-else
            as-child
            :disabled="item.disabled"
            :text-value="get(item, props.labelKey as string)"
            @select="item.onSelect"
          >
            <Link v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" :class="ui.item({ class: [uiOverride?.item, item.class], color: item?.color, active: item.active })" raw>
              <ReuseItemTemplate :item="item" :active="item.active" :index="index" />
            </Link>
          </RekaDropdownMenu.Item>
        </template>
      </RekaDropdownMenu.Group>

      <slot />

      <slot name="content-bottom" />
    </component>
  </RekaDropdownMenu.Portal>
</template>
DropdownMenuContent.vue
vue
<!-- eslint-disable vue/block-tag-newline -->
<script lang="ts">
import type { AvatarProps } from '@/UI/Components/Avatar.vue'
import type { DropdownMenuItem, DropdownMenuSlots } from '@/UI/Components/DropdownMenu.vue'
import type { KbdProps } from '@/UI/Components/Kbd.vue'
import type theme from '@/UI/Theme/dropdown-menu'
import type { ArrayOrNested, ComponentConfig, NestedItem } from '@/UI/Utils/utils'
import type { DropdownMenuContentEmits as RekaDropdownMenuContentEmits, DropdownMenuContentProps as RekaDropdownMenuContentProps } from 'reka-ui'
import Avatar from '@/UI/Components/Avatar.vue'
import DropdownMenuContent from '@/UI/Components/DropdownMenuContent.vue'
import Icon from '@/UI/Components/Icon.vue'
import Kbd from '@/UI/Components/Kbd.vue'
import Link from '@/UI/Components/Link.vue'
import { usePortal } from '@/UI/Composables/usePortal'
import { checkIcon, chevronRightIcon, externalIcon, loadingIcon } from '@/UI/icons'
import { get } from '@/UI/Utils/get'
import { isArrayOfArray } from '@/UI/Utils/is-array-of-array'
import { omit } from '@/UI/Utils/omit'
import { pickLinkProps } from '@/UI/Utils/pick-link-props'
import { createReusableTemplate, reactiveOmit } from '@vueuse/core'
import { useForwardPropsEmits } from 'reka-ui'
import { DropdownMenu as RekaDropdownMenu } from 'reka-ui/namespaced'
import { computed, toRef } from 'vue'

type DropdownMenu = ComponentConfig<typeof theme>

interface DropdownMenuContentProps<T extends ArrayOrNested<DropdownMenuItem>> extends Omit<RekaDropdownMenuContentProps, 'as' | 'asChild' | 'forceMount'> {
  items?: T
  portal?: boolean | string | HTMLElement
  sub?: boolean
  labelKey: keyof NestedItem<T>
  class?: any
  ui: { [K in keyof Required<DropdownMenu['slots']>]: (props?: Record<string, any>) => string }
  uiOverride?: DropdownMenu['slots']
}

interface DropdownMenuContentEmits extends RekaDropdownMenuContentEmits {}

type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<DropdownMenuSlots<T>, 'default'> & {
  default: (props?: object) => any
}
</script>

<script setup lang="ts" generic="T extends ArrayOrNested<DropdownMenuItem>">
const props = defineProps<DropdownMenuContentProps<T>>()
const emits = defineEmits<DropdownMenuContentEmits>()
const slots = defineSlots<DropdownMenuContentSlots<T>>()

const portalProps = usePortal(toRef(() => props.portal))
const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'class', 'ui', 'uiOverride'), emits)
const proxySlots = omit(slots, ['default'])

const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>()

const groups = computed<DropdownMenuItem[][]>(() =>
  props.items?.length
    ? isArrayOfArray(props.items)
      ? props.items
      : [props.items]
    : [],
)
</script>

<template>
  <DefineItemTemplate v-slot="{ item, active, index }">
    <slot :name="((item.slot || 'item') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :index="index">
      <slot :name="((item.slot ? `${item.slot}-leading` : 'item-leading') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
        <Icon v-if="item.loading" :name="loadingIcon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, loading: true })" />
        <Icon v-else-if="item.icon" :name="item.icon" :class="ui.itemLeadingIcon({ class: uiOverride?.itemLeadingIcon, color: item?.color, active })" />
        <Avatar v-else-if="item.avatar" :size="((props.uiOverride?.itemLeadingAvatarSize || ui.itemLeadingAvatarSize()) as AvatarProps['size'])" v-bind="item.avatar" :class="ui.itemLeadingAvatar({ class: uiOverride?.itemLeadingAvatar, active })" />
      </slot>

      <span v-if="get(item, props.labelKey as string) || !!slots[(item.slot ? `${item.slot}-label` : 'item-label') as keyof DropdownMenuContentSlots<T>]" :class="ui.itemLabel({ class: uiOverride?.itemLabel, active })">
        <slot :name="((item.slot ? `${item.slot}-label` : 'item-label') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
          {{ get(item, props.labelKey as string) }}
        </slot>

        <Icon v-if="item.target === '_blank'" :name="externalIcon" :class="ui.itemLabelExternalIcon({ class: uiOverride?.itemLabelExternalIcon, color: item?.color, active })" />
      </span>

      <span :class="ui.itemTrailing({ class: uiOverride?.itemTrailing })">
        <slot :name="((item.slot ? `${item.slot}-trailing` : 'item-trailing') as keyof DropdownMenuContentSlots<T>)" :item="(item as Extract<NestedItem<T>, { slot: string; }>)" :active="active" :index="index">
          <Icon v-if="item.children?.length" :name="chevronRightIcon" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color, active })" />
          <span v-else-if="item.kbds?.length" :class="ui.itemTrailingKbds({ class: uiOverride?.itemTrailingKbds })">
            <Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="((props.uiOverride?.itemTrailingKbdsSize || ui.itemTrailingKbdsSize()) as KbdProps['size'])" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
          </span>
        </slot>

        <RekaDropdownMenu.ItemIndicator as-child>
          <Icon :name="checkIcon" :class="ui.itemTrailingIcon({ class: uiOverride?.itemTrailingIcon, color: item?.color })" />
        </RekaDropdownMenu.ItemIndicator>
      </span>
    </slot>
  </DefineItemTemplate>

  <RekaDropdownMenu.Portal v-bind="portalProps">
    <component :is="sub ? RekaDropdownMenu.SubContent : RekaDropdownMenu.Content" :class="props.class" v-bind="contentProps">
      <slot name="content-top" />

      <RekaDropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="ui.group({ class: uiOverride?.group })">
        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
          <RekaDropdownMenu.Label v-if="item.type === 'label'" :class="ui.label({ class: uiOverride?.label })">
            <ReuseItemTemplate :item="item" :index="index" />
          </RekaDropdownMenu.Label>
          <RekaDropdownMenu.Separator v-else-if="item.type === 'separator'" :class="ui.separator({ class: uiOverride?.separator })" />
          <RekaDropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
            <RekaDropdownMenu.SubTrigger
              as="button"
              type="button"
              :disabled="item.disabled"
              :text-value="get(item, props.labelKey as string)"
              :class="ui.item({ class: uiOverride?.item, color: item?.color })"
            >
              <ReuseItemTemplate :item="item" :index="index" />
            </RekaDropdownMenu.SubTrigger>

            <DropdownMenuContent
              sub
              :class="props.class"
              :ui="ui"
              :ui-override="uiOverride"
              :portal="portal"
              :items="(item.children as T)"
              align="start"
              :align-offset="-4"
              :side-offset="3"
              :label-key="labelKey"
              v-bind="item.content"
            >
              <template v-for="(_, name) in proxySlots" #[name]="slotData">
                <slot :name="(name as keyof DropdownMenuContentSlots<T>)" v-bind="slotData" />
              </template>
            </DropdownMenuContent>
          </RekaDropdownMenu.Sub>
          <RekaDropdownMenu.CheckboxItem
            v-else-if="item.type === 'checkbox'"
            :model-value="item.checked"
            :disabled="item.disabled"
            :text-value="get(item, props.labelKey as string)"
            :class="ui.item({ class: [uiOverride?.item, item.class], color: item?.color })"
            @update:model-value="item.onUpdateChecked"
            @select="item.onSelect"
          >
            <ReuseItemTemplate :item="item" :index="index" />
          </RekaDropdownMenu.CheckboxItem>
          <RekaDropdownMenu.Item
            v-else
            as-child
            :disabled="item.disabled"
            :text-value="get(item, props.labelKey as string)"
            @select="item.onSelect"
          >
            <Link v-bind="pickLinkProps(item as Omit<DropdownMenuItem, 'type'>)" :class="ui.item({ class: [uiOverride?.item, item.class], color: item?.color, active: item.active })" raw>
              <ReuseItemTemplate :item="item" :active="item.active" :index="index" />
            </Link>
          </RekaDropdownMenu.Item>
        </template>
      </RekaDropdownMenu.Group>

      <slot />

      <slot name="content-bottom" />
    </component>
  </RekaDropdownMenu.Portal>
</template>

Theme ​

dropdown-menu-content.ts
ts
// Use 'dropdown-menu.ts'
export default {}
View Nuxt UI theme
dropdown-menu-content.ts
ts
// Use 'dropdown-menu.ts'
export default {}

Test ​

To test this component, you can use the following test file:

DropdownMenuContent.test.ts
ts
import { expect, it } from 'vitest'

// No tests for this component
it('passes', () => {
  expect(true).toBe(true)
})
DropdownMenuContent.test.ts
ts
import { expect, it } from 'vitest'

// No tests for this component
it('passes', () => {
  expect(true).toBe(true)
})

Contributors ​

barbapapazes

Changelog ​

5ffcd - feat: add DropdowmMenu component (#92) on 1/9/2025