Overview for divider

<mat-divider> is a component that allows for Material styling of a line separator with various orientation options.

Basic divider
Item 1
Item 2
Item 3

A <mat-divider> element can be used on its own to create a horizontal or vertical line styled with a Material theme

<mat-divider></mat-divider>

Add the inset attribute in order to set whether or not the divider is an inset divider.

<mat-divider [inset]="true"></mat-divider>

Add the vertical attribute in order to set whether or not the divider is vertically-oriented.

<mat-divider [vertical]="true"></mat-divider>

Dividers can be added to lists as a means of separating content into distinct sections. Inset dividers can also be added to provide the appearance of distinct elements in a list without cluttering content like avatar images or icons. Make sure to avoid adding an inset divider to the last element in a list, because it will overlap with the section divider.

<mat-list>
   <h3 mat-subheader>Folders</h3>
   @for (folder of folders; track folder) {
      <mat-list-item>
         <mat-icon mat-list-icon>folder</mat-icon>
         <h4 mat-line>{{folder.name}}</h4>
         <p mat-line class="demo-2">{{folder.updated}}</p>
         @if (!$last) {
            <mat-divider [inset]="true"></mat-divider>
         }
      </mat-list-item>
   }
   <mat-divider></mat-divider>
   <h3 mat-subheader>Notes</h3>
   @for (note of notes; track node) {
      <mat-list-item>
         <mat-icon mat-list-icon>note</mat-icon>
         <h4 mat-line>{{note.name}}</h4>
         <p mat-line class="demo-2"> {{note.updated}} </p>
      </mat-list-item>
   }
</mat-list>

MatDivider applies the ARIA role="separator" attribute, exclusively implementing the non-focusable style of separator that distinguishes sections of content.

Azure & Blue theme selected.