How to use @material/menu - 10 common examples

constructor(element) {
        super(element);
        this.hoistedMenuElement = element.querySelector('.mdc-menu');
        this.mdcComponent = new MDCMenu(this.hoistedMenuElement);

        initEvents(this.hoistedMenuElement);

        // Ensure that the menu surface closes when an item is clicked
        this.hoistedMenuElement.addEventListener('click', createSurfaceClickHandler(this.mdcComponent), { capture: true });

        var link = this.menulink();
        if (link) {
            link.addEventListener('click', createMenuHandler(this.mdcComponent, element));
        }
        this.mdcComponent.hoistMenuToBody();
    }

.then(() => new this._viewClasses.SelectView(this, this._model,
            this._screens.select, this._animationHelper));

    this._settingsViewPromise = import('./views/settings.js')
        .then((module) => this._viewClasses.SettingsView = module.SettingsView)
        .then(() => this._booted)
        .then(() => new this._viewClasses.SettingsView(this, this._model,
            this._screens.settings, this._animationHelper));

    this._booted.then(() => this._hideLoadingScreen());

    // MDC-Web component init.

    MDCRipple.attachTo(document.querySelector('.mm-convert__update'));
    const menu =
        new MDCSimpleMenu(document.querySelector('.mdc-toolbar__menu'));

    this._snackbar = new MDCSnackbar(document.querySelector('.mm-snackbar'));

    // Add event listener to button to toggle the menu on and off.
    this._elements.more.addEventListener('click', () =>
        this._booted.then(() => (menu.open = !menu.open)));

    // Add event listener to open Settings screen.
    document.querySelector('.mm-menu__settings').addEventListener('click',
        () => this._settingsViewPromise.then((view) => {
          view.show(this._screens.convert);
          history.pushState({page: 'settings'}, 'Settings');
        }));

    const ratesDialog =
        new MDCDialog(document.querySelector('#mm-rates-dialog'));

// occurs after the menu is already closed.
            _this.isMenuOpen_ = false;
            _this.selectedText_.removeAttribute('aria-expanded');
            if (document.activeElement !== _this.selectedText_) {
                _this.foundation_.handleBlur();
            }
        };
        this.targetElement_.addEventListener('change', this.handleChange_);
        this.targetElement_.addEventListener('focus', this.handleFocus_);
        this.targetElement_.addEventListener('blur', this.handleBlur_);
        this.targetElement_.addEventListener('click', this.handleClick_);
        if (this.menuElement_) {
            this.selectedText_.addEventListener('keydown', this.handleKeydown_);
            this.menu_.listen(menuSurfaceConstants.strings.CLOSED_EVENT, this.handleMenuClosed_);
            this.menu_.listen(menuSurfaceConstants.strings.OPENED_EVENT, this.handleMenuOpened_);
            this.menu_.listen(menuConstants.strings.SELECTED_EVENT, this.handleMenuSelected_);
            if (this.hiddenInput_ && this.hiddenInput_.value) {
                // If the hidden input already has a value, use it to restore the select's value.
                // This can happen e.g. if the user goes back or (in some browsers) refreshes the page.
                var enhancedAdapterMethods = this.getEnhancedSelectAdapterMethods_();
                enhancedAdapterMethods.setValue(this.hiddenInput_.value);
            }
            else if (this.menuElement_.querySelector(strings.SELECTED_ITEM_SELECTOR)) {
                // If an element is selected, the select should set the initial selected text.
                var enhancedAdapterMethods = this.getEnhancedSelectAdapterMethods_();
                enhancedAdapterMethods.setValue(enhancedAdapterMethods.getValue());
            }
        }
        // Initially sync floating label
        this.foundation_.handleChange(/* didChange */ false);
        if (this.root_.classList.contains(cssClasses.DISABLED)
            || (this.nativeControl_ && this.nativeControl_.disabled)) {

getDefaultFoundation() {
    // prettier-ignore
    return new MDCSimpleMenuFoundation({
      addClass: helper.addClass('rootProps', this),
      removeClass: helper.removeClass('rootProps', this),
      hasClass: helper.hasClass('rootProps', this),
      hasNecessaryDom: () => Boolean(this.itemsContainer_),
      getAttributeForEventTarget: (target, attributeName) => target.getAttribute(attributeName),
      getInnerDimensions: () => {
        const {itemsContainer_: itemsContainer} = this;
        return {width: itemsContainer.offsetWidth, height: itemsContainer.offsetHeight};
      },
      hasAnchor: () => this.root_.parentElement && this.root_.parentElement.classList.contains('mdc-menu-anchor'),
      getAnchorDimensions: () => this.root_.parentElement.getBoundingClientRect(),
      getWindowDimensions: () => {
        return {width: window.innerWidth, height: window.innerHeight};
      },
      setScale: (x, y) => {
        this.root_.style[util.getTransformPropertyName(window)] = `scale(${x}, ${y})`;

ngAfterViewInit(): void {
    this._menuFactory = new MDCMenu(this.selectMenu.elementRef.nativeElement);
    this._foundation.init();

    if (this.autosize) {
      this._setWidth();
    }
  }

      notifySelected: (evtData) => this.emit(MDCMenuFoundation.strings.SELECTED_EVENT, {
        index: evtData.index,
        item: angular.element(this.items[evtData.index]).controller(MDCMenuItemController.name),
      }),
      notifyCancel: () => this.emit(MDCMenuFoundation.strings.CANCEL_EVENT, {}),

      notifyCancel: () => this.emit(MDCMenuFoundation.strings.CANCEL_EVENT, {}),
      saveFocus: () => {

mounted() {
    const refreshItems = () => {
      this.items = [].slice.call(
        this.$refs.items.querySelectorAll('.mdc-list-item[role]'),
      );
      this.$emit('update');
    };
    this.slotObserver = new MutationObserver(() => refreshItems());
    this.slotObserver.observe(this.$el, {
      childList: true,
      subtree: true,
    });

    this._previousFocus = undefined;

    this.foundation = new MDCMenuFoundation({
      addClass: className => this.$set(this.classes, className, true),
      removeClass: className => this.$delete(this.classes, className),
      hasClass: className => this.$refs.root.classList.contains(className),
      hasNecessaryDom: () => Boolean(this.$refs.items),
      getAttributeForEventTarget: (target, attributeName) =>
        target.getAttribute(attributeName),
      getInnerDimensions: () => ({
        width: this.$refs.items.offsetWidth,
        height: this.$refs.items.offsetHeight,
      }),
      hasAnchor: () =>
        this.$refs.root.parentElement &&
        this.$refs.root.parentElement.classList.contains('mdc-menu-anchor'),
      getAnchorDimensions: () =>
        this.$refs.root.parentElement.getBoundingClientRect(),
      getWindowDimensions: () => ({

componentDidMount() {
    const foundation = new MDCMenuFoundation(this.adapter);
    foundation.init();
    this.setState({foundation});
  }

item: this.items[evtData.index],
        });

        this.$emit('select', {
          index: evtData.index,
          item: this.items[evtData.index],
        });
      },
      getMenuItemCount: () => this.items.length,
      focusItemAtIndex: index => this.items[index].focus(),
      focusListRoot: () =>
        this.$el.querySelector(strings.LIST_SELECTOR).focus(),
    };

    this.menuOpen = this.open;
    this.foundation = new MDCMenuFoundation(adapter);

    this.foundation.init();
  },
  beforeDestroy() {