The Angular Masterclass/

...

/

Adding Navigation Menu in Toolbar of Application

Adding Navigation Menu in Toolbar of Application

Let's add menu components to our toolbar which provide navigation to different sections of our application.

We'll cover the following...

Adding Menu components to our toolbar

Now, we are ready to add the menu components inside the toolbar to create our menu.

Step 1: Update CustomMaterial module

First, we need to add MatMenuModule in the imports and exports array of CustomMaterial module (line 16 and line 24 of custom-material.module.ts file).

Step 2: Update NavigationComponent

Here are the changes we’re going to make to navigation.component.html in order to add a simple menu.

📝 Note: Press the RUN button to compile and serve the application. Once the app compiles, click on the URL given after Your app can be found at, and see what happens!

import { AppPage } from './app.po';
import { browser, logging } from 'protractor';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', () => {
    page.navigateTo();
    expect(page.getTitleText()).toEqual('Client-Contacts-Manager-Angular app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});
Client Contacts Manager Application with menu items

We should see the following in our menu:

Here, we’ve added a series of menu components. <mat-menu> creates dropdown menus. In each of these, we’ve added two button components. By using the mat-menu-item directive, we are telling Angular that these ...