CODEWITHSUNDEEP
angularangular2-templateangular-material2
so-random-dude
so-random-dude

Reputation: 16505

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

Upvotes: 17

Views: 26765

Answers (2)

so-random-dude
so-random-dude

Reputation: 16505

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>

Upvotes: 39

Mohammad Hassani
Mohammad Hassani

Reputation: 541

<mat-sidenav-container>

    <mat-sidenav #right position="start">
       Start Sidenav.
    </mat-sidenav>

    <mat-sidenav #left position="end">
       End Sidenav.
    </mat-sidenav>

<div>
    <button mat-button (click)="right.open()">right</button>
    <button mat-button (click)="left.open()">left</button>
</div>

</mat-sidenav-container>

Upvotes: 10

Related Questions