Skip to content


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 an <hr> by default. You can save rendering this DOM element by using the divider property on the ListItem component.

HTML5 Specification

In a list, you should ensure the Divider is rendered as an <li> to match the HTML5 specification. The examples below show two ways of achieving this.

Inset Dividers

  • 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



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

Select type

Extra Soft

Vertical Dividers

You can also render a divider vertically using the orientation prop.

<Grid container alignItems="center" className={classes.root}>
  <FormatAlignLeftIcon />
  <FormatAlignCenterIcon />
  <FormatAlignRightIcon />
  <Divider orientation="vertical" />
  <FormatBoldIcon />
  <FormatItalicIcon />
  <FormatUnderlinedIcon />