Displays buttons on a responsive menu.


Basic Usage


Place the buttons for the menu inside this component's HTML tags. They must use the following structure:

    <button mat-menu-item (click)="showSettings()">
    <button mat-menu-item (click)="delete()">

Note that the buttons themselves also have an icon (supplied as a <mat-icon) and a label (supplied as a <span>). They also make use of the Angular material directive mat-menu-item.

<button mat-menu-item (click)="event()">
        <mat-icon> icon </mat-icon>
        <span> label </span>


This component is fully responsive and it will display one of two different layouts depending on the screen size:

Desktop View


Mobile View


The component has a property called isMenuEmpty that you can access from code. If this is set to true then the component will not show an empty menu with no buttons defined.

© 2023 Alfresco Software, Inc. All Rights Reserved.