Divider

Angular Material Divider separates content within a layout, providing a visual break that improves readability and organization. It draws a thin rule that runs the full width, sits inset so it starts level with the text beside it, or stands upright between items in a row. BuilderKit restyles the line so it reads as a quiet separator rather than a hard border.

Official docs API reference

Inside a list, a divider marks the end of a group of items without adding any extra spacing around them.

Example

A horizontal divider between stacked items.

Item 1

Item 2

Item 3

<div>
  <div>Item 1</div>
  <mat-divider />
  <div>Item 2</div>
  <mat-divider />
  <div>Item 3</div>
</div>

Inset

The inset attribute indents the divider so it starts level with the text beside it.

Item 1

Item 2

Item 3

<div>
  <div>Item 1</div>
  <mat-divider inset />
  <div>Item 2</div>
  <mat-divider inset />
  <div>Item 3</div>
</div>

Vertical

The vertical attribute stands the divider upright between items in a row.

Item 1

Item 2

Item 3

<div class="flex">
  <div>Item 1</div>
  <mat-divider vertical />
  <div>Item 2</div>
  <mat-divider vertical />
  <div>Item 3</div>
</div>

Divider between list items

Dropped into a list, the rule stretches across the row and separates one group of items from the next without pushing them apart.

Inbox

Starred

Drafts

Sent

<mat-list>
  <mat-list-item>Inbox</mat-list-item>
  <mat-list-item>Starred</mat-list-item>
  <mat-divider />
  <mat-list-item>Drafts</mat-list-item>
  <mat-list-item>Sent</mat-list-item>
</mat-list>