Divider
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 prop on the ListItem component.
<List sx={style} component="nav" aria-label="mailbox folders">
<ListItem button>
<ListItemText primary="Inbox" />
</ListItem>
<Divider />
<ListItem button divider>
<ListItemText primary="Drafts" />
</ListItem>
<ListItem button>
<ListItemText primary="Trash" />
</ListItem>
<Divider light />
<ListItem button>
<ListItemText primary="Spam" />
</ListItem>
</List>
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
Dividers with text
You can also render a divider with content.
<Root>
{content}
<Divider>CENTER</Divider>
{content}
<Divider textAlign="left">LEFT</Divider>
{content}
<Divider textAlign="right">RIGHT</Divider>
{content}
<Divider>
<Chip label="CHIP" />
</Divider>
{content}
</Root>
Vertical divider
You can also render a divider vertically using the orientation prop.
Note the use of the flexItem prop to accommodate for the flex container.
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.
<Grid container>
<Grid item xs>
{content}
</Grid>
<Divider orientation="vertical" flexItem>
VERTICAL
</Divider>
<Grid item xs>
{content}
</Grid>
</Grid>