A divider is a thin line that groups content in lists and containers.
Dividers can reinforce tapability, such as when used to separate list items or define tappable regions in an accordion.
Use full width dividers to separate larger sections of unrelated content.
<section>
<p>Lorem ipsum...</p>
<md-divider></md-divider>
<p>Lorem ipsum...</p>
</section>
Use inset dividers to separate related content within a section.
<section>
<p>Material 2</p>
<md-divider inset></md-divider>
<p>Material 3</p>
</section>
Inset dividers are equally indented from both sides of the screen by default.
Use inset-start
or inset-end
to change this.
<section>
<p>Material 2</p>
<md-divider inset-start></md-divider>
<p>Material 3</p>
</section>
Dividers are decorative by default and not announced by assistive technology.
Add a
role="separator"
attribute to non-decorative dividers that should be announced.
<ul>
<li>Item one</li>
<md-divider inset></md-divider>
<li>Item two</li>
<md-divider role="separator"></md-divider>
<li>Item three</li>
<md-divider inset></md-divider>
<li>Item four</li>
</ul>
Divider supports theming and can be customized with CSS custom property tokens.
Token | Default value |
---|---|
--md-divider-color |
--md-sys-color-outline-variant |
--md-divider-thickness |
1px |
<style>
:root {
--md-sys-color-outline-variant: #BEC9C8;
--md-divider-thickness: 2px;
}
</style>
<section>
<p>Lorem ipsum...</p>
<md-divider></md-divider>
<p>Lorem ipsum...</p>
</section>
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
inset |
inset |
boolean |
false |
Indents the divider with equal padding on both sides. |
insetStart |
inset-start |
boolean |
false |
Indents the divider with padding on the leading side. |
insetEnd |
inset-end |
boolean |
false |
Indents the divider with padding on the trailing side. |