Adding Navigation Menu in Toolbar of Application

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!