Every application needs to have some sort of navigation, to provide users with a better experience.

Creating a navigation menu will be our goal in this article.

We have to use angular routing as well, and we are going to do that, but we won’t dive deep inside the routing concepts. If you want to learn in more detail about the angular routing, you can read Angular Navigation And Routing.

Because this series is all about angular material, this article won’t be an exception. We will focus on creating a navigation menu by using different material components. Once we are done, we will have a fully responsive and functional navigation menu with the routing logic to support the complete process.

For the complete navigation and all the basic instructions of the Angular Material series, check out: Introduction of the Angular Material series.

The source code is available at GitHub Angular Material Navigation Menu – Source Code

We are going to divide this post into several sections:

Creating Routes

Let’s start with creating a new routing module:

routing module - Angular Material Navigation

A next step is to modify the routing.module.ts file:

Finally, let’s modify the app.compnent.html file to complete the routing part for now:

We should be able to see our home component again, but this time it is served on the /home route.

Angular Material provides different components which we can use to create nicely styled, responsive and effective navigation in our app. But we need to start with something, don’t we? So, let’s start with the app.component.html file modification by using the mat-sidenav-container component:

We create a container for a side navigation bar and specify the part for our content. As you can see the <mat-sidenav> element defines a place for a side navigation and the <mat-sidenav-content>element defines a place for our content. We need to use the local reference #sidenav, and a little bit later, you will see why.

Of course, this won’t work. We need to register the module in the material.module.ts file:

Now, we should have a working application again with some grayish background. Let’s style this a bit in the app.component.css file:

And let’s modify the styles.css file:

That is it. We have all prepared and it is time to start working on our navigation header component.

To create a navigation header, we need to use the mat-toolbar element. But first thing first.

This component has its own module, so we need to register that module inside the material.module.ts file:

After that, we are going to create a new header component:

header component - Angular Material Navigation

Now it is time to include this component inside the app.component.html file, right above the <main> tag:

Then, let’s modify the header.component.html file:

Basically, we create our navigation with the menu icon (we still need to register its own module), and the Owner-Account part that navigates to the home component. As you can see, we use the fxHide.gt-xs directive, which states that this part should be hidden only on the screen that is greater than extra small.

We have another part of a navigation which is positioned on the end of the navbar and hidden only for the extra small screen.

To continue, let’s register the MatIconModule and MatButtonModule inside the material module file:

Right now, our menu looks like this:

nav menu started - Angular Material Navigation

Looking beautiful right? 😀 😀

Of course not, but we have the starting functionality in place and we are going to make it much nicer.

To do that, let’s modify the header.component.css file:

Now if we can have another look at our menu. It looks much nicer, isn’t it?

header component styled - Angular Material Navigation

If we take a look at the icon button code, we can see the onToggleSidenav() event. We need to implement it inside the header.component.ts file:

If you want to learn more about @Output directives, you can read Angular Series Article About Decorators.

Finally, we have to react to this event emitter inside our app.component.html file:

Now it is obvious why we need the #sidenav local reference inside the mat-sidenav component.

Our result should look like this:

navigation completed - Angular Material Navigation

Excellent. The time has come to implement the side navigation.

Creating Side Navigation

To create side navigation items, we are going to use the mat-nav-list element that resides inside MatListModule. So, let’s register this module first in the material.module.ts file:

Then let’s create the sidenav-list component and modify the sidenav-list.component.html file:

As you can see, we use the mat-nav-list as a container with all the anchor tags containing the mat-list-item attributes. The click event is there for every link, to close the side-nav as soon as a user clicks on it. Finally, every link contains its own mat-icon.

Let’s continue by adding some styles to the sidenav-list.component.css file:

And finally let’s modify the sidenav-list.component.ts file:

That’s it. We can now open the app.component.html file and modify it to add the side-nav component:

In this code, we react on the event emitter from the sidenav-list component and close the side-nav by using the #sidenav local reference.

Now, all we have to do is to take a look at our result:

sidenav menu completed - Angular Material Navigation

 

Multi-Menu in Side-Nav

There is one more thing we want to show you. For now, we only have a one clickable link per section, inside our sidenav. But what if we want to have a menu item and when we click that menu item other options appear? Well, we are going to show you how to do that as well.

So, in the sidenav-list.component.html file, we need to add the following code below the last anchor tag:

For this to work, we need to register MatMenuModule:

As a result, we should have a multi-menu option in our side navigation bar:

multi menu

 

Conclusion

Awesome.

Now we have our own responsive navigation menu, built from scratch.

In this article we have learned:

  • How to create the main navigation
  • The way to create a side navigation menu
  • How to implement multi-menu options in the side navigation

In the next article, we are going to learn more about Material Table with Filter, Sort and Paging functionalities.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.