Dropdown Menu

A button-triggered menu that presents a list of actions or functions to the user.
alphaView sourceRadix ThemesReka UI
vue
<script setup lang="ts">
import {
  Button,
  DropdownMenuRoot,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from '@typlog/ui'
import CaretDownIcon from '~icons/radix-icons/caret-down'
</script>

<template>
  <DropdownMenuRoot>
    <DropdownMenuTrigger>
      <Button variant="soft">
        Options
        <CaretDownIcon />
      </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem shortcut="⌘ E">Edit</DropdownMenuItem>
      <DropdownMenuItem shortcut="⌘ D">Duplicate</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem shortcut="⌘ N">Archive</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem>Share</DropdownMenuItem>
      <DropdownMenuItem>Add to favorites</DropdownMenuItem>
      <DropdownMenuSeparator />
      <DropdownMenuItem shortcut="⌘ ⌫" color="red">
        Delete
      </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenuRoot>
</template>

API Reference ​

Contains all the parts of a dropdown menu.

Wraps the control that will open the dropdown menu. Usually used with Button:

vue
<template>
<DropdownMenuRoot>
  <DropdownMenuTrigger as-child>
    <Button>Show dropdown menu</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>...</DropdownMenuContent>
</DropdownMenuRoot>
</template>

The component that pops out when the dropdown menu is open.

PropDefaultType
color
–
Color
highContrast
–
boolean
size
–
"1""2"
variant
–
"solid""soft"

The component that contains the dropdown menu items.

PropDefaultType
color
–
Color
shortcut
–
string

Examples ​

Variant ​

vue
<script setup lang="ts">
import {
  Button,
  DropdownMenuRoot,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
} from '@typlog/ui'
import CaretDownIcon from '~icons/radix-icons/caret-down'
</script>

<template>
  <div class="flex items-center gap-4">
    <DropdownMenuRoot>
      <DropdownMenuTrigger>
        <Button variant="solid">
          Solid
          <CaretDownIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent variant="solid">
        <DropdownMenuItem shortcut="⌘ E">Edit</DropdownMenuItem>
        <DropdownMenuItem shortcut="⌘ D">Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem shortcut="⌘ N">Archive</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Share</DropdownMenuItem>
        <DropdownMenuItem>Add to favorites</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem shortcut="⌘ ⌫" color="red">
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuRoot>
    <DropdownMenuRoot>
      <DropdownMenuTrigger>
        <Button variant="soft">
          Soft
          <CaretDownIcon />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent variant="soft">
        <DropdownMenuItem shortcut="⌘ E">Edit</DropdownMenuItem>
        <DropdownMenuItem shortcut="⌘ D">Duplicate</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem shortcut="⌘ N">Archive</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Share</DropdownMenuItem>
        <DropdownMenuItem>Add to favorites</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem shortcut="⌘ ⌫" color="red">
          Delete
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenuRoot>
  </div>
</template>