Skip to content

Instantly share code, notes, and snippets.

@yubing24
Created August 9, 2018 05:51
Show Gist options
  • Save yubing24/138c09ac7baecadada939c14ff8b846c to your computer and use it in GitHub Desktop.
Save yubing24/138c09ac7baecadada939c14ff8b846c to your computer and use it in GitHub Desktop.
Angular Material Side Navigation with Expandable Menus
<mat-toolbar color="accent">
<button mat-icon-button matTooltip="Application Menu" (click)="sidenav.toggle()">
<mat-icon>settings</mat-icon>
</button>
Account Settings
<span style="flex: 1 1 auto;"></span>
<div>
<button mat-icon-button matTooltip="Switch Apps">
<mat-icon>apps</mat-icon>
</button>
<button mat-icon-button matTooltip="Notifications">
<mat-icon>notifications</mat-icon>
</button>
<button mat-icon-button matTooltip="My Account" [matMenuTriggerFor]="accountMenu">
<mat-icon>account_circle</mat-icon>
</button>
<mat-menu #accountMenu [overlapTrigger]="false" yPosition="below">
<button mat-menu-item routerLink="#">
<mat-icon>person</mat-icon><span>My Account</span>
</button>
<button mat-menu-item>
<mat-icon>help</mat-icon><span>Help</span>
</button>
<mat-divider></mat-divider>
<button mat-menu-item>
<mat-icon>exit_to_app</mat-icon>Logout
</button>
</mat-menu>
</div>
</mat-toolbar>
<mat-sidenav-container style="height: calc(100% - 64px); margin: 0;">
<mat-sidenav #sidenav mode="side" [class.mat-elevation-z4]="true" style="width: 240px">
<mat-nav-list dense>
<mat-list-item routerLink="#"><mat-icon>dashboard</mat-icon>Dashboard</mat-list-item>
<mat-list-item routerLink="#"><mat-icon>check_box</mat-icon>General</mat-list-item>
<mat-list-item routerLink="#"><mat-icon>person</mat-icon>Profile</mat-list-item>
<mat-list-item routerLink="#"><mat-icon>notification_important</mat-icon>Notification</mat-list-item>
<mat-expansion-panel [class.mat-elevation-z0]="true" dense>
<mat-expansion-panel-header>
Preference
</mat-expansion-panel-header>
<mat-nav-list dense>
<a mat-list-item routerLink="#"><mat-icon>attach_money</mat-icon>Billing</a>
<a mat-list-item routerLink="#"><mat-icon>notification_important</mat-icon>Notification</a>
</mat-nav-list>
</mat-expansion-panel>
<mat-expansion-panel [class.mat-elevation-z0]="true" dense>
<mat-expansion-panel-header>
Privacy
</mat-expansion-panel-header>
<mat-nav-list dense>
<a mat-list-item routerLink="#"><mat-icon>person_add</mat-icon>Partnership Request</a>
<a mat-list-item routerLink="#"><mat-icon>visibility</mat-icon>Profile Visibility</a>
</mat-nav-list>
</mat-expansion-panel>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet>
<div class="container mat-body-1">
Account Component
</div>
</router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
@ramule
Copy link

ramule commented Jan 13, 2023

It helped

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment