Home » Angular Material Menubar

Angular Material Menubar

by Online Tutorials Library

Angular Material Menubar

The menu bar is a horizontal bar that consists of labels of menus in an operating system GUI and other applications. For creating the menu in Angular material, the md-menubar container component is used that hold multiple menus.

Menu items in Angular

Steps to implement menu items in Angular applications are as follows:

Step 1: Import Angular Material Menu module

We can import material menu module (MatMenuModule) in the app.components.ts file or app.module.ts file that can be used across the application.

Step 2: Use mat Menu selector to display Menu Items

After importing the MatMenuModule in the component file, use mat-menu selector that is a floating panel containing list of menu options.

Add a template reference variable to the mat-menu that refers to the menu panel.

Step 3: Add matMenuTriggerFor Element

The mat-menu element in the UI does not render anything.

The menu must be associated with a trigger element that open and close the menu using the matMenuTriggerFor directive.

In the above example, we attach the mat-menu container to a “Simple Menu” button by the matMenuTriggerFor attribute.

Angular Material Menubar

Changing mat Menu Position

By default, the material menu will be displayed under the menu trigger element.

To change the menu position, we use the xPosition and yPosition properties of the mat-menu selector.

mat-Menu position Before or after

If you want to display menus before and after the menu trigger element, we can pass the xPosition value as “before” or “after.”

The xPosition property changes the menu position on the horizontal axis.

Mat Menu position above or below

To display the menu position above the menu trigger element set yPosition property as above. It is used to change the menu position across the vertical axis. It accepts the values above or below.

Mat Menu with Icons

We display material icons before the menu item text by placing mat-icon elements.


The below example shows the use of md-menu-bar directive and also the uses of menu-bar.



Angular Material Menubar

You may also like