<app-drawer>

()

app-drawer is a navigation drawer that can slide in from the left or right.

Example:

Align the drawer at the start, which is left in LTR layouts (default):

<app-drawer opened></app-drawer>

Align the drawer at the end:

<app-drawer align="end" opened></app-drawer>

To make the contents of the drawer scrollable, create a wrapper for the scroll content, and apply height and overflow styles to it.

<app-drawer>
  <div style="height: 100%; overflow: auto;"></div>
</app-drawer>

Styling

Custom property | Description | Default ———————————|—————————————-|——————– --app-drawer-width | Width of the drawer | 256px --app-drawer-content-container | Mixin for the drawer content container | {} --app-drawer-scrim-background | Background for the scrim | rgba(0, 0, 0, 0.5)