How to create Right side Navbar with md-sidenav in Angular Material – Angular 2


I am trying to create “right navbar” with angular material 2 md-sidenav. No matter what I do, it is always coming on the left. How can I change this to right sidenav instead?

  <md-sidenav #sidenavright mode="side" class="app-sidenav" opened="true">


Okay, it’s easier than I thought, silly me!!

To align md-sidenav to right side, just add align="end" to md-sidenav element.

  <md-sidenav align="end" #sidenavright mode="side" class="app-sidenav" opened="true">


It’s changed to position="end" in the later versions


<mat-sidenav #sidenavright position="end">
       Right sideNav

Answered By – so-random-dude

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.