🎉 Material UI v4 is out now! Check out the announcement blog post →
Dividers

Dividers

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

Dividers separate content into clear groups.

List Dividers

The divider renders as a <hr> by default. You can save rendering this DOM element by using the divider property on the ListItem component.

HTML5 Specification

We need to make sure the Divider is rendered as a li to match the HTML5 specification. The examples below show two ways of achieving this.

Inset Dividers

The inset property has now been deprecated. You should now use variant="inset".

  • Photos

    Jan 9, 2014


  • Work

    Jan 7, 2014

  • Vacation

    July 20, 2014

Subheader Dividers

  • Photos

    Jan 9, 2014

  • Divider
  • Work

    Jan 7, 2014

  • Leisure
  • Vacation

    July 20, 2014

Middle Dividers

Toothbrush

$4.50

Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the hall.


Select type

Extra Soft
Soft
Medium
Hard