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

Issue

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>

Solution

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>

Answered By – so-random-dude

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.