Free
Pro

Dropdown

A Base UI (Angular) 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 base-ui-cli add dropdown-menu.

free

Basic Dropdown Menu

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


HTML

Dropdown Menu with icons & cascade

Add icons to base-dropdown-menu-item. To open a nested menu, put [base-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

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

Installation

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

bash

npx base-ui-cli add dropdown-menu

API Reference

For AI agents

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

bash

npx -y base-ui-mcp

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

typescript (Example)

// Install: npx base-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
APIMemberTypeDefaultDescription
DropdownPaneltemplateRefSignal<TemplateRef<T>> — —
DropdownPanelclosedOutputEmitterRef<void> — —
base-dropdown-menusizestring — Optional custom width size for the dropdown container.
base-dropdown-menu(closed)void — Event emitted when the menu has fully closed.
base-dropdown-menu-itemclassstring''Extra host classes merged via `cn()`.
base-dropdown-menu-itemcheckedboolean | undefinedundefinedWhen set, the item is a checkbox (`menuitemcheckbox`) and the menu stays open after click. Two-way bind to toggle.
base-dropdown-menu-itemstayOpenbooleanfalseKeep the dropdown open after this item is clicked (e.g. a custom toggle). Implied when is bound.