Components

Sidenav

Angular Material Sidenav is a collapsible side panel used to show additional content or navigation links alongside the main view. It can slide over the page on top of a backdrop, sit beside the content and push it aside, or stay open as a permanent column, and it can be anchored to either edge of the screen. BuilderKit restyles the panel, the backdrop and the borders so the mat-sidenav component matches the rest of the design system.

Official docs API reference

The links inside the panel are usually rendered with the list component, which gives them their spacing and hover states.

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>

Side mode that pushes the content

In side mode the panel shares the row with the main view instead of covering it, so opening and closing it makes the content next to it narrower and wider without a backdrop.

Sidenav content

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

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