We can extend the lists to make them clickable, and therefore make them into navigational links. To make the list items clickable, we will need to use the <mat-nav-list> directive. Take a look at the sample code as follows:

<mat-card class="z-depth" >
 <mat-card-title>Material Navigational Lists</mat-card-title>
 <mat-card-content>
<mat-nav-list>
 <a mat-list-item href="#" *ngFor="let nav of menuLinks"> {{ nav }} </a>
</mat-nav-list>
 </mat-card-content>
</mat-card>

In the preceding code, we created a navigation type of list and the list items inside our cards, using the <mat-nav-list> and <mat-list-item> directives that are provided in the MatListModule module. The output of the preceding code is given as follows: