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.
CENTER
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.
LEFT
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.
RIGHT
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.
CHIP
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.
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.
VERTICAL
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.
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
fullWidth
horizontal
API
See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.