StorybookGitHub

Dropdown Menu

Displays a menu of actions or options triggered by a button.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/dropdown-menu.json

Usage

Use a dropdown menu for actions attached to a button or other click trigger. Built on reka-ui's DropdownMenu.

<script setup lang="ts">
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
</script>

<template>
  <DropdownMenu>
    <DropdownMenuTrigger as-child>
      <Button variant="outline">Open</Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Profile</DropdownMenuItem>
      <DropdownMenuItem>Billing</DropdownMenuItem>
      <DropdownMenuItem>Team</DropdownMenuItem>
      <DropdownMenuItem>Subscription</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</template>

Compose checkboxes, radio groups, submenus, separators, and shortcuts. Mark destructive actions with variant="destructive" on DropdownMenuItem.