Dropdown menu

Popover to show some collateral info about something.

Examples

Basic dropdown menu

Code

<template>
  <DropdownMenu :items="items" label="User" @select="onSelect">
    <template #trigger>
      <Button>Show menu</Button>
    </template>
  </DropdownMenu>
</template>
<script setup lang="ts">
import { DropdownMenu, type MenuItem } from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'

const onSelect = (item: MenuItem) => {
  alert(item.label + ' menu item was selected.')
}

const items = [
  {
    label: 'This is a simple menu item',
    icon: 'save',
    help: 'Help'
  },
  {
    label: 'Account',
    items: [
      {
        label: 'Edit settings',
        icon: 'cog',
        help: '⇧⌘P',
        disabled: true
      },
      {
        label: 'Team',
        icon: 'user'
      },
      {
        label: 'Invite',
        icon: 'share',
        children: [
          {
            label: 'Email',
            icon: 'mail',
            help: '⇧⌘E'
          },
          {
            label: 'Messenger',
            icon: 'send',
            help: '⇧⌘M'
          },
          {
            items: [
              {
                label: 'More',
                icon: 'plus'
              }
            ]
          }
        ]
      }
    ]
  },
  {
    label: 'Logout',
    icon: 'log-out'
  }
]
</script>

Custom position

Code

<template>
  <DropdownMenu
    :items="items"
    label="User"
    side="right"
    align="start"
  >
    <template #trigger>
      <Button>Show menu</Button>
    </template>
  </DropdownMenu>
</template>
<script setup lang="ts">
import { DropdownMenu } from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'

const items = [
  {
    label: 'This is a simple menu item',
    icon: 'save'
  },
  {
    label: 'Account',
    items: [
      {
        label: 'Edit settings',
        icon: 'cog',
        help: '⇧⌘P'
      },
      {
        label: 'Team',
        icon: 'user'
      },
      {
        label: 'Invite',
        icon: 'share',
        children: [
          {
            label: 'Email',
            icon: 'mail',
            help: '⇧⌘E'
          },
          {
            label: 'Messenger',
            icon: 'send',
            help: '⇧⌘M'
          }
        ]
      }
    ]
  },
  {
    label: 'Logout',
    icon: 'log-out'
  }
]
</script>

Menu controlled by v-model

Code

<template>
  <div class="flex flex-col gap-5 items-center">
    <Button @click="open = true">
      Show menu
    </Button>

    <DropdownMenu
      v-model:open="open"
      :items="items"
      label="User"
    >
      <template #trigger>
        <Button icon="menu" />
      </template>
    </DropdownMenu>
  </div>
</template>
<script setup lang="ts">
import { DropdownMenu } from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { ref } from 'vue'

const open = ref(false)
const items = [
  {
    label: 'This is a simple menu item',
    icon: 'save'
  },
  {
    label: 'Account',
    items: [
      {
        label: 'Edit settings',
        icon: 'cog',
        help: '⇧⌘P'
      },
      {
        label: 'Team',
        icon: 'user'
      },
      {
        label: 'Invite',
        icon: 'share',
        children: [
          {
            label: 'Email',
            icon: 'mail',
            help: '⇧⌘E'
          },
          {
            label: 'Messenger',
            icon: 'send',
            help: '⇧⌘M'
          }
        ]
      }
    ]
  },
  {
    label: 'Logout',
    icon: 'log-out'
  }
]
</script>

Menu with a radio group

Code

<template>
  <DropdownRadioGroupMenu
    v-model="value"
    :items="items"
    label="Report cadence"
  >
    <template #trigger>
      <Button>Select cadence</Button>
    </template>
  </DropdownRadioGroupMenu>
</template>
<script setup lang="ts">
import { DropdownRadioGroupMenu } from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { ref } from 'vue'

const items = [
  {
    label: 'Daily',
    value: 'daily'
  },
  {
    label: 'Weekly',
    value: 'weekly'
  },
  {
    label: 'Monthly',
    value: 'monthly'
  }
]

const value = ref('daily')
</script>

Menu with a checkbox group

Code

<template>
  <DropdownCheckboxGroupMenu
    v-model="value"
    :items="items"
    label="Devices"
  >
    <template #trigger>
      <Button>Select devices</Button>
    </template>
  </DropdownCheckboxGroupMenu>
</template>
<script setup lang="ts">
import { DropdownCheckboxGroupMenu } from '@/components/ui/dropdown-menu'
import { Button } from '@/components/ui/button'
import { ref } from 'vue'

const items = [
  {
    label: 'Mobile',
    value: 'mobile'
  },
  {
    label: 'Desktop',
    value: 'desktop'
  },
  {
    label: 'Wearable',
    value: 'wearable'
  }
]

const value = ref(['mobile'])
</script>