Divider

A divider is a thin line that groups content in lists and containers.

Dividers can reinforce tapability, such as when used to separate list items or define tappable regions in an accordion.

Screenshot of five stacked dividers

Usage

Use full width dividers to separate larger sections of unrelated content.

A full width divider separating two paragraphs of "Lorem ipsum"

<section>
  <p>Lorem ipsum...</p>
  <md-divider></md-divider>
  <p>Lorem ipsum...</p>
</section>

Inset dividers

Link to “Inset dividers”

Use inset dividers to separate related content within a section.

A list of design system names separated by an inset divider

<section>
  <p>Material 2</p>
  <md-divider inset></md-divider>
  <p>Material 3</p>
</section>

Inset dividers are equally indented from both sides of the screen by default. Use inset-start or inset-end to change this.

A list of design system names separated by a leading inset divider

<section>
  <p>Material 2</p>
  <md-divider inset-start></md-divider>
  <p>Material 3</p>
</section>

Accessibility

Link to “Accessibility”

Dividers are decorative by default and not announced by assistive technology.

Add a role="separator" attribute to non-decorative dividers that should be announced.

<ul>
  <li>Item one</li>
  <md-divider inset></md-divider>
  <li>Item two</li>
  <md-divider role="separator"></md-divider>
  <li>Item three</li>
  <md-divider inset></md-divider>
  <li>Item four</li>
</ul>

Theming

Link to “Theming”

Divider supports theming and can be customized with CSS custom property tokens.

Tokens

Link to “Tokens”

Token	Default value
`--md-divider-color`	`--md-sys-color-outline-variant`
`--md-divider-thickness`	`1px`

All tokens

Example

Link to “Example”

A customized divider with a different color and thickness

<style>
:root {
  --md-sys-color-outline-variant: #BEC9C8;
  --md-divider-thickness: 2px;
}
</style>

<section>
  <p>Lorem ipsum...</p>
  <md-divider></md-divider>
  <p>Lorem ipsum...</p>
</section>

API

Link to “API”

MdDivider `<md-divider>`

Link to “MdDivider <md-divider>”

Properties

Link to “Properties”

Property	Attribute	Type	Default	Description
`inset`	`inset`	`boolean`	`false`	Indents the divider with equal padding on both sides.
`insetStart`	`inset-start`	`boolean`	`false`	Indents the divider with padding on the leading side.
`insetEnd`	`inset-end`	`boolean`	`false`	Indents the divider with padding on the trailing side.