---
product: "AG Grid"
title: "Menu Item Component"
description: "Menu Item Components allow you to customise the menu items shown in the and . Use these when the provided menu items do not meet your requirements."
enterprise: true
framework: angular
version: "36.2.0"
related:
    - title: "Tool Panels"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/tool-panel/"
    - title: "Quick Access Toolbar"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/toolbar/"
    - title: "Column Menu"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/column-menu/"
    - title: "Column Chooser"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/column-chooser/"
    - title: "Context Menu"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/context-menu/"
    - title: "Status Bar"
      url: "https://www.ag-grid.com/archive/36.2.0/angular-data-grid/status-bar/"
llms: "https://www.ag-grid.com/archive/36.2.0/llms.txt"
---

# Menu Item Component

Menu Item Components allow you to customise the menu items shown in the [Column Menu](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/column-menu/) and [Context Menu](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/context-menu/). Use these when the provided menu items do not meet your requirements.

The following example demonstrates a custom menu item component in both the column menu and context menu. Clicking on the buttons in the custom menu items will log to the developer console.

#### Custom Menu Item Component

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetContextMenuItems,
  GetContextMenuItemsParams,
  GetMainMenuItems,
  GetMainMenuItemsParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
]);
import { MenuItem } from "./menu-item.component";
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, MenuItem],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [rowData]="rowData"
    [getMainMenuItems]="getMainMenuItems"
    [getContextMenuItems]="getContextMenuItems"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete" },
    { field: "country" },
    { field: "sport" },
    { field: "year" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  getMainMenuItems: GetMainMenuItems = (params: GetMainMenuItemsParams) => {
    return [
      ...params.defaultItems,
      "separator",
      {
        name: "Click Alert Button and Close Menu",
        menuItem: MenuItem,
        menuItemParams: {
          buttonValue: "Alert",
        },
      },
      {
        name: "Click Alert Button and Keep Menu Open",
        suppressCloseOnSelect: true,
        menuItem: MenuItem,
        menuItemParams: {
          buttonValue: "Alert",
        },
      },
    ];
  };
  getContextMenuItems: GetContextMenuItems = (
    params: GetContextMenuItemsParams,
  ) => {
    return [
      ...(params.defaultItems || []),
      "separator",
      {
        name: "Click Alert Button and Close Menu",
        menuItem: MenuItem,
        menuItemParams: {
          buttonValue: "Alert",
        },
      },
      {
        name: "Click Alert Button and Keep Menu Open",
        suppressCloseOnSelect: true,
        menuItem: MenuItem,
        menuItemParams: {
          buttonValue: "Alert",
        },
      },
    ];
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}
```

[Live example: Custom Menu Item Component](https://www.ag-grid.com/archive/36.2.0/examples/component-menu-item/custom-menu-item/angular/)

Implement this interface to provide a custom menu item.

```ts
interface extends IMenuItemAngularComp {
    // mandatory methods

    // The agInit(params) method is called on the menu item once.
    agInit(params: IMenuItemParams);

    // optional methods

    // Configure the default grid behaviour for this item, including styling,
    // and mouse and keyboard interactions.
    // Return `true` to use all default behaviour, `false` to use no default behaviour
    // (equivalent to `configureDefaults` not being defined),
    // or `IMenuConfigParams` to choose what default behaviour to use.
    configureDefaults(): boolean | IMenuConfigParams;

    // Called when the item is activated/deactivated, either via mouseover or keyboard navigation.
    setActive(active: boolean): void;

    // If the item has a sub menu, called when the sub menu is opened/closed.
    setExpanded(expanded: boolean): void;

    // Called when the item is selected, e.g. clicked or Enter is pressed.
    select(): void;
}
```

To enable the default menu item behaviour, implement the `configureDefaults` method and return `true` (see [Providing Custom Behaviour](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/component-menu-item/#providing-custom-behaviour)).

The `agInit(params)` method takes a params object with the items listed below:

Properties available on the `IMenuItemParams&lt;TData = any, TContext = any&gt;` interface.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `onItemActivated` | `Function` |  |  |  |
| `level` | `number` |  |  |  |
| `isAnotherSubMenuOpen` | `Function` |  |  |  |
| `openSubMenu` | `Function` |  |  |  |
| `closeSubMenu` | `Function` |  |  |  |
| `closeMenu` | `Function` |  |  |  |
| `updateTooltip` | `Function` |  |  |  |
| `subMenu` | `(MenuItemDef \| string)[]` |  |  |  |
| `subMenuRole` | `'menu' \| 'listbox' \| 'tree' \| 'grid' \| 'dialog'` |  |  |  |
| `menuItem` | `any` |  |  |  |
| `menuItemParams` | `any` |  |  |  |
| `name` | `string` |  |  |  |
| `disabled` | `boolean` |  |  |  |
| `shortcut` | `string` |  |  |  |
| `action` | `Function` |  |  |  |
| `checked` | `boolean` |  |  |  |
| `icon` | `Element \| string` |  |  |  |
| `cssClasses` | `string[]` |  |  |  |
| `tooltip` | `string` |  |  |  |
| `suppressCloseOnSelect` | `boolean` |  |  |  |
| `api` | `GridApi` |  |  |  |
| `context` | `TContext` |  |  |  |

## Default Styling

In order for the menu to size dynamically, the default styling is provided via `display: table`. This means that if custom menu item components are used alongside grid-provided menu items, then they must adhere to a certain structure, or the grid styles must be overridden.

The default structure consists of a parent element with `display: table-row`, and four children with `display: table-cell`. This can be seen in the example above. If using `configureDefaults` and not suppressing root styling, the grid will automatically add the correct styling to the parent element.

This format can be overridden by [Styling the Menu](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/theming-popups/), notably `ag-menu-list`, `ag-menu-option`, `ag-menu-option-part`, `ag-menu-separator` and `ag-menu-separator-part`. This is demonstrated in the [Providing Custom Behaviour](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/component-menu-item/#providing-custom-behaviour) example below.

## Providing Custom Behaviour

As described above, the easiest way to configure the behaviour of a custom menu item is returning `true` from `configureDefaults`.

If this is not done, then the custom menu item will need to implement all of the required behaviour itself.

It is also possible to disable certain parts of the behaviour by returning an object of type `IMenuConfigParams` from `configureDefaults`:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `suppressTooltip` | `boolean` |  |  |  |
| `suppressClick` | `boolean` |  |  |  |
| `suppressMouseDown` | `boolean` |  |  |  |
| `suppressMouseOver` | `boolean` |  |  |  |
| `suppressKeyboardSelect` | `boolean` |  |  |  |
| `suppressTabIndex` | `boolean` |  |  |  |
| `suppressAria` | `boolean` |  |  |  |
| `suppressRootStyles` | `boolean` |  |  |  |
| `suppressFocus` | `boolean` |  |  |  |

The following example demonstrates providing custom behaviour (in the column menu only) by including a filter as a menu item. To allow for a full-width custom menu item alongside grid-provided ones, the default menu styling is overridden (see [Default Styling](https://www.ag-grid.com/archive/36.2.0/angular-data-grid/component-menu-item/#default-styling)).

#### Menu Item Component Without Defaults

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./style.css";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GetMainMenuItems,
  GetMainMenuItemsParams,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberFilterModule,
  TextFilterModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  ExcelExportModule,
} from "ag-grid-enterprise";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  TextFilterModule,
  NumberFilterModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ExcelExportModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
]);
import { MenuItem } from "./menu-item.component";
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular, MenuItem],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [getMainMenuItems]="getMainMenuItems"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete" },
    { field: "country" },
    { field: "sport" },
    { field: "year" },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    filter: true,
    suppressHeaderFilterButton: true,
  };
  getMainMenuItems: GetMainMenuItems = (params: GetMainMenuItemsParams) => {
    return [
      ...params.defaultItems.filter((item) => item !== "columnFilter"),
      "separator",
      {
        name: "Filter",
        menuItem: MenuItem,
        menuItemParams: {
          column: params.column,
        },
      },
    ];
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/olympic-winners.json")
      .subscribe((data) => {
        this.rowData = data;
      });
  }
}
```

[Live example: Menu Item Component Without Defaults](https://www.ag-grid.com/archive/36.2.0/examples/component-menu-item/menu-item-without-defaults/angular/)

Note this shows a column filter in the custom menu item as an example for how complex items can be added. It is not meant to be used as a complete solution.