Menu

A menu is a list of options or commands presented to the user in a dropdown list.

Import

Import the Menu primitives from ng-primitives/menu.

import { NgpMenu, NgpMenuItem, NgpMenuTrigger } from 'ng-primitives/menu';

Usage

The Menu primitives are a thin wrapper around the Angular CDK Menu directives. As a result you will need to import the Angular CDK overlay styles in your application.

@import '@angular/cdk/overlay-prebuilt.css';

Assemble the menu directives in your template.

<button [ngpMenuTrigger]="menu"></button>

<ng-template #menu>
  <div ngpMenu>
    <div ngpMenuItem>Item 1</div>
    <div ngpMenuItem>Item 2</div>
    <div ngpMenuItem>Item 3</div>
  </div>
</ng-template>

API Reference

The following directives are available to import from the ng-primitives/menu package:

NgpMenuTrigger

The NgpMenuTrigger directive allows you to turn an element into a menu trigger.

• Selector: [ngpMenuTrigger]
• Exported As: ngpMenuTrigger

The menu template to display when the trigger is activated.

Data Attributes

The following data attributes are available on the NgpMenuTrigger directive:

Attribute	Description	Value
data-open	If the menu is open.	true | false

NgpMenu

The NgpMenu is a container for menu items.

• Selector: [ngpMenu]
• Exported As: ngpMenu

NgpMenuItem

The NgpMenuItem directive represents a menu item.

• Selector: [ngpMenuItem]
• Exported As: ngpMenuItem
• Host Directives: NgpHover, NgpFocusVisible, NgpPress

Define if the menu item is disabled.

Data Attributes

The following data attributes are available on the NgpMenuItem directive:

Attribute	Description	Value
data-disabled	If the menu item is disabled.	true | false