ipsos-components/src/demo-app/a11y/sidenav/dual-sidenav-a11y.html

Material Design components for Angular

<mat-toolbar color="primary" role="header" aria-label="Dual sidenav app">
  <button mat-icon-button aria-label="Navigation menu" (click)="startSnav.toggle()">
    <mat-icon aria-hidden="true">menu</mat-icon>
  </button>
  <h1 class="a11y-demo-sidenav-app-name">Dual Sidenav App</h1>
  <span class="a11y-demo-sidenav-spacer" aria-hidden="true"></span>
  <button mat-icon-button aria-label="Playlist menu" (click)="endSnav.toggle()">
    <mat-icon aria-hidden="true">playlist_play</mat-icon>
  </button>
</mat-toolbar>

<mat-sidenav-container class="a11y-demo-sidenav-container">
  <mat-sidenav #startSnav mode="side" role="navigation">
    <mat-nav-list>
      <a mat-list-item routerLink="..">Home</a>
      <a mat-list-item routerLink="../basic">Basic sidenav example</a>
      <a mat-list-item routerLink="../mobile">Responsive sidenav example</a>
      <a mat-list-item routerLink="../dual">Dual sidenavs example</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content role="region">
    <button mat-raised-button aria-label="Close dual sidenav example" color="primary"
            class="a11y-demo-sidenav-close" routerLink="..">
      Close example
    </button>
  </mat-sidenav-content>

  <mat-sidenav #endSnav mode="side" position="end" class="a11y-demo-sidenav-playlist" role="region"
               (open)="playlist1.focus()">
    <h2 class="a11y-demo-sidenav-playlist-header">Playlists</h2>
    <button #playlist1 mat-button aria-label="Thumbs up playlist" (click)="play('Thumbs up')">
      Thumbs up
    </button>
    <button mat-button aria-label="Last added playlist" (click)="play('Last added')">
      Last added
    </button>
    <button mat-button aria-label="Free and purchased playlist"
            (click)="play('Free and purchased')">
      Free and purchased
    </button>
  </mat-sidenav>
</mat-sidenav-container>