Dropdown

A Ply dropdown is an action menu anchored to a trigger, not a select. Install dropdown-menu, bind the trigger directive to a menu, and leaf items close the popup. Nested menus stay open on hover until you pick a leaf. Use checked or stayOpen for items that must not dismiss.

When to use

Overflow actions, account menus, and nested command lists.
When the choice is an action, not a form value.

When not to use

Picking a value that belongs in a form — use select, combobox, or radio.
A hover preview card — use hover-card or popover.

Install with npx ply-ui-cli add dropdown-menu.

free

Basic Dropdown Menu

To trigger the Basic Dropdown add to the action element [ply-dropdown-menu-trigger]="" and the identifier name added to the <ply-dropdown-menu></ply-dropdown-menu>

HTML

<button ply-button color="primary" [ply-dropdown-menu-trigger]="basic">
  Dropdown menu
  <ply-icon name="chevron-down"></ply-icon>
</button>

<ply-dropdown-menu #basic>
  <a ply-dropdown-menu-item href="javascript:void(0)">Settings</a>
  <button ply-dropdown-menu-item>User Profile</button>
  <ply-dropdown-menu-item>Logout</ply-dropdown-menu-item>
</ply-dropdown-menu>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add dropdown-menu
// Paths are relative to aliases.components (default: src/app/components)
import { DropdownMenuItemComponent } from './dropdown-menu/dropdown-menu-item/dropdown-menu-item.component';
import { DropdownMenuComponent } from './dropdown-menu/dropdown-menu.component';
import { DropdownPanel } from './dropdown-menu/dropdown-panel';

@Component({
  selector: 'app-dropdown-menu-example',
  imports: [
    DropdownMenuComponent,
    DropdownMenuItemComponent
  ],
  template: `...`
})
export class DropdownMenuExampleComponent {}

Install

bash

npx ply-ui-cli add dropdown-menu

Dropdown Menu with icons & cascade

Add icons to ply-dropdown-menu-item. To open a nested menu, put [ply-dropdown-menu-trigger] on a menu item with placement="right" (or left) — the parent stays open until you pick a leaf action or click outside.

HTML

<button ply-button color="primary" [ply-dropdown-menu-trigger]="basicIcons">
  Dropdown with icons
  <ply-icon name="chevron-down"></ply-icon>
</button>

<ply-dropdown-menu #basicIcons>
  <a ply-dropdown-menu-item href="javascript:void(0)">
    <ply-icon name="settings" class="mr-4 min-w-5 w-5 h-5 stroke-slate-500"></ply-icon>
    Settings
  </a>
  <button ply-dropdown-menu-item [ply-dropdown-menu-trigger]="submenu" placement="right">
    <ply-icon name="user" class="mr-4 min-w-5 w-5 h-5 stroke-slate-500"></ply-icon>
    User Profile
    <ply-icon name="chevron-right" class="ml-auto min-w-5 w-5 h-5 stroke-slate-500"></ply-icon>
  </button>
  <ply-dropdown-menu-item>
    <ply-icon name="arrow-out" class="mr-4 min-w-5 w-5 h-5 stroke-slate-500"></ply-icon>
    Logout
  </ply-dropdown-menu-item>
</ply-dropdown-menu>

<ply-dropdown-menu #submenu>
  <a ply-dropdown-menu-item href="javascript:void(0)">Password Update</a>
  <button ply-dropdown-menu-item type="button">Email Update</button>
</ply-dropdown-menu>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add dropdown-menu
// Paths are relative to aliases.components (default: src/app/components)
import { DropdownMenuItemComponent } from './dropdown-menu/dropdown-menu-item/dropdown-menu-item.component';
import { DropdownMenuComponent } from './dropdown-menu/dropdown-menu.component';
import { DropdownPanel } from './dropdown-menu/dropdown-panel';

@Component({
  selector: 'app-dropdown-menu-example',
  imports: [
    DropdownMenuComponent,
    DropdownMenuItemComponent
  ],
  template: `...`
})
export class DropdownMenuExampleComponent {}

Install

bash

npx ply-ui-cli add dropdown-menu

Dropdown Position

Use placement placement="" to control the position of the dropdown. Supported positions are "start" by default, "end", "left", "right", "top-start" and "top-end"

HTML

<button
  ply-button
  color="primary"
  [ply-dropdown-menu-trigger]="menuPosition"
  placement="end">
  Dropdown end
  <ply-icon name="chevron-down"></ply-icon>
</button>

<ply-dropdown-menu #menuPosition>
  <a ply-dropdown-menu-item href="javascript:void(0)">Settings</a>
  <button ply-dropdown-menu-item>User Profile</button>
  <ply-dropdown-menu-item>Logout</ply-dropdown-menu-item>
</ply-dropdown-menu>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add dropdown-menu
// Paths are relative to aliases.components (default: src/app/components)
import { DropdownMenuItemComponent } from './dropdown-menu/dropdown-menu-item/dropdown-menu-item.component';
import { DropdownMenuComponent } from './dropdown-menu/dropdown-menu.component';
import { DropdownPanel } from './dropdown-menu/dropdown-panel';

@Component({
  selector: 'app-dropdown-menu-example',
  imports: [
    DropdownMenuComponent,
    DropdownMenuItemComponent
  ],
  template: `...`
})
export class DropdownMenuExampleComponent {}

Install

bash

npx ply-ui-cli add dropdown-menu

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add dropdown-menu

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add dropdown-menu
// Paths are relative to aliases.components (default: src/app/components)
import { DropdownMenuItemComponent } from './dropdown-menu/dropdown-menu-item/dropdown-menu-item.component';
import { DropdownMenuComponent } from './dropdown-menu/dropdown-menu.component';
import { DropdownPanel } from './dropdown-menu/dropdown-panel';

@Component({
  selector: 'app-your-component',
  imports: [
    DropdownMenuComponent,
    DropdownMenuItemComponent
  ],
  template: `...`
})
export class YourComponent {}

API for dropdown-menu — generated from JSDoc in the library source.

API reference for dropdown-menu
API	Member	Type	Default	Description
`DropdownPanel`	`templateRef`	`Signal<TemplateRef<T>>`	—	—
`DropdownPanel`	`closed`	`OutputEmitterRef<void>`	—	—
`ply-dropdown-menu`	`size`	`string`	—	Optional custom width size for the dropdown container.
`ply-dropdown-menu`	`(closed)`	`void`	—	Event emitted when the menu has fully closed.
`ply-dropdown-menu-item`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-dropdown-menu-item`	`checked`	`boolean \| undefined`	`undefined`	When set, the item is a checkbox (`menuitemcheckbox`) and the menu stays open after click. Two-way bind to toggle.
`ply-dropdown-menu-item`	`stayOpen`	`boolean`	`false`	Keep the dropdown open after this item is clicked (e.g. a custom toggle). Implied when is bound.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).