Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Card Actions with Nested Share Dropdown Menu for Vue

A card's actions menu with Edit, Duplicate, Archive and Delete, and a Share submenu for email and social networks.

UI library: Ark UI

A dots button opens Edit, Duplicate, a Share submenu, Archive, and a destructive Delete. Share holds Email, Twitter, Facebook, and LinkedIn.

Use it on a card when share targets would push the card's own actions out of sight. A right-click list is a Context Menu. In Vue, Ark UI opens Share and does not send it.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Dropdown Menu anatomy: trigger, label, item, shortcut, separator, sub trigger, content

Usage

<DropdownMenu>
  <DropdownMenuTrigger :asChild="true">
    <Button aria-label="Card actions" size="icon-sm" variant="ghost">
      <MoreHorizontalIcon aria-hidden="true" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent class="w-48">
    <DropdownMenuItem value="edit">
      <PencilIcon aria-hidden="true" />Edit
    </DropdownMenuItem>
    <DropdownMenuItem value="duplicate">
      <CopyIcon aria-hidden="true" />Duplicate
    </DropdownMenuItem>
    <DropdownMenuSeparator />
    <DropdownMenuSub>
      <DropdownMenuSubTrigger>
        <Share2Icon aria-hidden="true" />Share
      </DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuItem value="email">
          <MailIcon aria-hidden="true" />Email
        </DropdownMenuItem>
        <DropdownMenuItem value="twitter">
          <AtSignIcon aria-hidden="true" />Twitter
        </DropdownMenuItem>
        <DropdownMenuItem value="facebook">
          <ThumbsUpIcon aria-hidden="true" />Facebook
        </DropdownMenuItem>
        <DropdownMenuItem value="linkedin">
          <BriefcaseIcon aria-hidden="true" />LinkedIn
        </DropdownMenuItem>
<!-- The rest of the file is under Installation. -->

FAQ

What opens the card actions?

A ghost Button with size="icon-sm" and aria-label set to Card actions, holding a dots icon that is aria-hidden.

Where does the menu open?

Below the button, lined up with its end edge, and it flips to stay on screen. The menu is w-48. That is DropdownMenu's default bottom-end placement. Pass positioning with another placement to move it.

What is the order of the rows?

Edit, Duplicate, a separator, the Share submenu, a separator, then Archive and Delete. Each row starts with an icon that is aria-hidden.

How is Share nested?

DropdownMenuSub wraps a DropdownMenuSubTrigger, which draws its own chevron, and a DropdownMenuSubContent with Email, Twitter, Facebook and LinkedIn. It opens on hover, or with Arrow Right from the keyboard, and Arrow Left closes it. Lucide has no brand logos, so the social rows use generic icons: swap in your own logo icons.

How is Delete marked?

variant="destructive" on that DropdownMenuItem, after a trash icon. Archive, above it, keeps the default variant. The variant only colors the row; confirm the delete yourself.

How do I run Edit, Share, or Delete?

The menu closes after a choice. Handle it where your library reports the chosen item. Listen to @select on DropdownMenu, and on DropdownMenuSub for the Share rows. It receives details.value, the chosen item's value.

API Reference

Dropdown Menu

Sets asChild, value="edit", value="duplicate", value="email", value="twitter" and value="facebook". The rest is on the Dropdown Menu page.

Button

Sets aria-label="Card actions", size="icon-sm" and variant="ghost". The rest is on the Button page.

All 30 dropdown menu examples