Dropdown Component

Displays a menu to the user—such as a set of actions or functions—triggered by a button or other element.

Basic Usage

html
<uButton [uDropdown]="menuItems">Open Menu</uButton>

Menu Items Configuration

Configure the menu items in your component logic.

typescript
menuItems: DropdownItem[] = [
  { label: 'Settings', icon: '⚙️', shortcut: '⌘S', action: () => this.onSettings() },
  { separator: true },
  { label: 'Danger Zone', isLabel: true },
  { label: 'Delete', icon: '🗑️', color: 'danger', action: () => this.onDelete() }
];

API Reference

uDropdown (Directive)

PropertyTypeDefaultDescription
uDropdownDropdownItem[][]Array of items to display in the menu
align'left' | 'right''left'Alignment of the menu relative to the trigger

DropdownItem Interface

typescript
interface DropdownItem {
  label: string;
  shortcut?: string;
  icon?: string;
  disabled?: boolean;
  action?: () => void;
  separator?: boolean;
  isLabel?: boolean;
}