Responsive Navbar with Angular Flex Layout

Today, we are going to create a responsive Navbar using Toolbar and Sidenav Components from Angular Material together with Angular Flex Layout. We will be trying to replicate the behavior of Navbar in where it collapses on small screen and is fully displayed in Large screen.

If you are not aware, Angular Flex Layout provides a responsive Layout API with CSS flexbox and media query for Angular application. This post assumes you have knowledge in Angular 2+ applications and will not cover the basics. If you are new to Angular, you can learn how to get started here. Let’s get started:

Installation and Initial Setup

Angular Material

To install and setup Angular Material, you can follow the detailed instruction here from the official guide.

Angular Flex Layout

Installing Angular flex layout is simple. Use the following commands:

npm install @angular/flex-layout –save

yarn add @angular/flex-layout

Then import the Flex Layout Module in your app.module.ts as show below

import { FlexLayoutModule } from '@angular/flex-layout';

NB: Don’t forget to include FlexLayoutModule in the list of imports in ngModule imports.

Assuming you have successfully installed and setup both Angular Material and Angular Flex Layout, let’s move on and create a responsive navigation bar.

This is rather a straightforward process. We will create a toolbar at the top of the window and a side navigation bar with the same content as the toolbar. The toolbar will have a menu item that will open the Sidenav. This item will only be shown on small screen when the rest of the menu is hidden and vice versa. To create a toolbar, you use the following code below.

<mat-toolbar color="primary">
  <span>Responsive Navigation</span> <span class="example-spacer"></span>
  <a href="#" mat-button>Menu Item 1</a> <a href="#" mat-button>Menu Item 2</a>
  <a href="#" mat-button>Menu Item 3</a> <a href="#" mat-button>Menu Item 4</a>
  <a href="#" mat-button>Menu Item 5</a> <a href="#" mat-button>Menu Item 6</a>
</mat-toolbar>

As you see, this is Just a normal material toolbar without any responsive capabilities. Next, lets create a Sidenav with the same items.

<mat-sidenav-container fxFlexFill class="example-container">
  <mat-sidenav fxLayout="column" mode="side" opened="false">
    <div fxLayout="column">
      <a href="#" mat-button>Menu Item 1</a>
      <a href="#" mat-button>Menu Item 2</a>
      <a href="#" mat-button>Menu Item 3</a>
      <a href="#" mat-button>Menu Item 4</a>
      <a href="#" mat-button>Menu Item 5</a>
      <a href="#" mat-button>Menu Item 6</a>
    </div>
  </mat-sidenav>
  <mat-sidenav-content fxFlexFill> Main content</mat-sidenav-content>
</mat-sidenav-container>

Now that we have both a Sidenav and a toolbar working, let’s work on making them responsive.

Adding Responsiveness using Angular Flex Layout

To add responsiveness to our navbar, we will use Angular Flex Layout to hide and show the toolbar menu items based on screen size. To do this, we enclose the menu items on a div container and then use fxHide and fxShow directive to hide and show the menu items. Example: To hide some content on small screens only:

<div fxFlex fxShow="”true”" fxHide.sm="”true”"></div>

To hide some content on both small and extra small screens only:

<div fxFlex fxShow="”true”" fxHide.lt-md="”true”"></div>

Simple? Now, let’s add this to our menu item:

<div style="height: 100vh;">
  <mat-toolbar color="primary">
    <span>Responsive Navigation</span> <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <!-- The following menu items will be hidden on both SM and XS screen sizes -->
      <a href="#" mat-button>Menu Item 1</a>
      <a href="#" mat-button>Menu Item 2</a>
      <a href="#" mat-button>Menu Item 3</a>
      <a href="#" mat-button>Menu Item 4</a>
      <a href="#" mat-button>Menu Item 5</a>
      <a href="#" mat-button>Menu Item 6</a>
    </div>
  </mat-toolbar>
</div>

Now, if you resize the browser width to small size, the menu items are hidden instead of being squeezed. But, we need to show a menu icon to reveal or draw the Sidenav on small screens. This will work similarly to the above code but have the opposite effect: Show on small screen, hide on large screens.

<div fxShow="true" fxHide.gt-sm="true"><a href="#">Show Side Menu</a></div>

As you can see, instead of hiding on lt-md (less than medium screen size) we are showing the single menu item on gt-sm(great than small screen size). You can use the table below for various breaking points of Angular Flex Layout Responsive API.

Now let’s add the code on the “Show Side Menu” menu item so that it reveals the Sidenav menu items.

<div fxShow="true" fxHide.gt-sm="true">
  <a href="#" (click)="sidenav.toggle()">Show Side Menu</a>
</div>

Final Code

The whole code for a responsive navbar menu will look like this:

<div style="height: 100vh;">
  <mat-toolbar color="primary">
    <span>Responsive Navigation</span>

    <span class="example-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">
      <!-- The following menu items will be hidden on both SM and XS screen sizes -->
      <a href="#" mat-button>Menu Item 1</a>
      <a href="#" mat-button>Menu Item 2</a>
      <a href="#" mat-button>Menu Item 3</a>
      <a href="#" mat-button>Menu Item 4</a>
      <a href="#" mat-button>Menu Item 5</a>
      <a href="#" mat-button>Menu Item 6</a>
    </div>

    <div fxShow="true" fxHide.gt-sm="true">
      <a href="#" (click)="sidenav.toggle()">Show Side Menu</a>
    </div>
  </mat-toolbar>

  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav #sidenav fxLayout="column">
      <div fxLayout="column">
        <a (click)="sidenav.toggle()" href="#" mat-button>Close</a>
        <a href="#" mat-button>Menu Item 1</a>
        <a href="#" mat-button>Menu Item 2</a>
        <a href="#" mat-button>Menu Item 3</a>
        <a href="#" mat-button>Menu Item 4</a>
        <a href="#" mat-button>Menu Item 5</a>
        <a href="#" mat-button>Menu Item 6</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>
  </mat-sidenav-container>
</div>

You can get the whole project on github.

Conclusion

This is a simple example of how you can use Angular Material and Angular Flex Layout to create a nice responsive navigation bar for your own application. If you have any question regarding anything I covered in this article, feel free to raise it in the comment section below and I will get back to you. You can also make suggestion on how to improve this simple navbar and other topics you would like me to cover.