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

so-random-dude picture so-random-dude · Mar 2, 2017 · Viewed 23.2k times · Source

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">
    <app-question-rightnav></app-question-rightnav>
  </md-sidenav>

Answer

so-random-dude picture so-random-dude · Mar 2, 2017

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">
    <app-question-rightnav></app-question-rightnav>
  </md-sidenav>

Update

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

Example

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