Skip to content

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

Free

Dropdown Actions Input Group for Vue

A file name field with a ghost More button whose menu lists Settings, Copy path, and Open location.

UI library: Ark UI

A file name field with a ghost More button at the end. The menu lists Settings, Copy path, and Open location, lined up with the button's end. The items do not change the file name.

Use it when a field has extra actions that should not each be a button. If one of them cannot be undone, confirm it in an Alert Dialog. In Vue, Ark UI does not run the menu items.

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

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup class="w-full max-w-sm bg-background">
  <InputGroupInput aria-label="File name" placeholder="Enter file name" type="text" />
  <InputGroupAddon align="inline-end">
    <DropdownMenu :positioning='{ placement: "bottom-end" }'>
      <DropdownMenuTrigger :asChild="true">
        <InputGroupButton aria-label="More" size="icon-xs" variant="ghost">
          <MoreHorizontalIcon aria-hidden="true" />
        </InputGroupButton>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuGroup>
          <DropdownMenuItem value="settings">Settings</DropdownMenuItem>
          <DropdownMenuItem value="copy-path">Copy path</DropdownMenuItem>
          <DropdownMenuItem value="open-location">Open location</DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  </InputGroupAddon>
</InputGroup>

FAQ

How is the More button wired to the menu?

The trigger is an icon-only InputGroupButton named More. DropdownMenuTrigger takes asChild, so the InputGroupButton itself is the trigger.

Why does the menu line up with the end of the field?

positioning on DropdownMenu sets placement to bottom-end.That keeps the menu under the button instead of spilling past the field.

Do the items do anything?

Not in the demo. Run each action from its item's select handler.

Where does the addon go?

After the input, with align="inline-end", so the button sits at the end and the input keeps the space before it.

How is the input labeled?

aria-label="File name", since there's no visible label.

Can the menu be used from the keyboard?

Yes. Enter, Space or Arrow Down on the button opens it, arrows move between items, Enter picks one and Escape closes it, returning focus to the button.

API Reference

Input Group

Sets aria-label="File name", placeholder="Enter file name", type="text", align="inline-end", aria-label="More" and size="icon-xs". The rest is on the Input Group page.

Dropdown Menu

Sets positioning="{ placement: bottom-end }", asChild, value="settings", value="copy-path" and value="open-location". The rest is on the Dropdown Menu page.

All 39 input group examples