Components

Sidenav

Angular Material Sidenav is a collapsible side panel used to show additional content or navigation links alongside the main view.

Official docs API reference

Example

Below is an example of how BuilderKit restyles the Angular Material Sidenav and gives it a more modern appearance.

Sidenav content

<mat-sidenav-container>
  <mat-sidenav mode="over" #sidenav>Sidenav content</mat-sidenav>

  <mat-sidenav-content>
    <button matButton (click)="sidenav.toggle()">Toggle Sidenav</button>
  </mat-sidenav-content>
</mat-sidenav-container>