Skip to content
+

Divider

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

Dividers separate content into clear groups.

  • Feedback
  • Bundle size
  • Material Design
  • Figma
  • Adobe
  • Sketch

List dividers

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

Press Enter to start editing

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 divider

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

Dividers with text

You can also render a divider with content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Press Enter to start editing

Vertical divider

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


Vertical with variant middle

You can also render a vertical divider with variant="middle".


Vertical with text

You can also render a vertical divider with content.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.
Press Enter to start editing

Experimental APIs

Material You version

The default Material UI Divider component follows the Material Design 2 specs. To get the Material You (Material Design 3) version, use the new experimental @mui/material-next package:

import Divider from '@mui/material-next/Divider';
  • Photos

    Jan 9, 2014


  • Work

    Jan 7, 2014

<Divider />

Playground


API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

Edit this page

Was this page helpful?


ChipIcons

Blog

Store