Salesforce Lightning button menu in Lightning Web component

A lightning:buttonMenu represents a button that when clicked displays a dropdown menu of actions or functions that a user can access.

The menu closes when you click away from it, and it also closes and puts the focus back on the button when you select a menu item.

Use lightning:menuItem as a subcomponent of lightning:buttonMenu to specify the menu items for the button menu.

HTML

<template>
   <lightning-card title="Button Menu Example">
      <div class="slds-p-around_medium lgc-bg">
         <lightning-button-menu alternative-text="Show menu" icon-name="utility:settings" onselect={handleMenuItem}>
            <lightning-menu-item label="New" icon-name="utility:new" value="New"></lightning-menu-item>
            <lightning-menu-item label="Edit" icon-name="utility:edit" value="Edit"></lightning-menu-item>
            <lightning-menu-item label="Delete" icon-name="utility:delete" value="Delete"></lightning-menu-item>
         </lightning-button-menu>
      </div>
   </lightning-card>
</template>

JS

import { LightningElement } from "lwc";

export default class App extends LightningElement {
  handleMenuItem(event) {
    console.log("selected menu => " + event.detail.value);
    switch (event.detail.value) {
      case "New":
        // do logic
        break;
      case "Edit":
        //do logic
        break;
      case "Delete":
        //do logic
        break;
    }
  }
}