@kit-ng-ui/dropdown

Overlay menu triggered by a button (or any element). Wraps <kit-popover> for positioning and <kit-menu> for the menu body.

Install

pnpm add @kit-ng-ui/dropdown

@use '@kit-ng-ui/popover/styles' as popover;
@use '@kit-ng-ui/menu/styles' as menu;
@use '@kit-ng-ui/dropdown/styles' as dropdown;

Usage

items: KitMenuItem[] = [
  { key: 'edit', label: 'Edit', icon: '✎' },
  { key: 'delete', label: 'Delete', icon: '🗑' },
];

<kit-dropdown [items]="items" (itemClick)="onPick($event)">
  <button>Actions ▾</button>
</kit-dropdown>

Dropdown button (split primary + caret)

<kit-dropdown-button
  [items]="items"
  type="primary"
  (primaryClick)="publishNow()"
  (itemClick)="publishAs($event)"
>
  Publish
</kit-dropdown-button>

API

<kit-dropdown>

| Input | Type | Default | Description | | --------------- | -------------------- | -------------- | -------------------------------------------- | | items | ReadonlyArray<KitMenuItem> | [] | Menu entries. | | placement | KitPopoverPlacement | 'bottomLeft' | Overlay placement. | | trigger | KitPopoverTrigger | 'click' | Trigger behaviour. | | arrow | boolean | false | Show the popover arrow. | | disabled | boolean | false | Disable the trigger. | | selectable | boolean | false | Highlight the chosen item (sticky selection). | | closeOnSelect | boolean | true | Close the overlay when an item is clicked. | | open | boolean (two-way) | false | Programmatic open state. |

| Output | Payload | Description | | ---------- | -------------- | ---------------------------------------- | | itemClick | KitMenuItem | Fires when a menu entry is clicked. |

<kit-dropdown-button>

| Input | Type | Default | | ------------- | -------------------------- | ---------------- | | items | ReadonlyArray<KitMenuItem> | [] | | type | KitButtonType | 'default' | | size | KitButtonSize | 'medium' | | danger | boolean | false | | disabled | boolean | false | | placement | KitPopoverPlacement | 'bottomRight' |

| Output | Payload | Description | | -------------- | -------------- | ----------------------------------- | | primaryClick | void | The primary action button was hit. | | itemClick | KitMenuItem | A dropdown menu entry was chosen. |