Divider
Separate content with dividers that follow your Material theme.
Separate content with horizontal, vertical, inset, and labeled dividers. All examples inherit the site's Material colors in light and dark themes.
The existing divider class still works. All variants below are included in Materialize CSS.
Horizontal
A full-width rule separates sections. Use a native hr for a thematic break.
Account details
Notification preferences
<p>Account details</p>
<!-- Add divider-line to opt into the extended styles. -->
<hr class="divider divider-line" />
<p>Notification preferences</p>Inset and middle
Inset from the start edge, or both edges. Logical margins also follow right-to-left layouts.
<div class="divider-demo-item">Full width</div>
<hr class="divider divider-line" />
<div class="divider-demo-item">Start inset</div>
<hr class="divider divider-line divider-inset" />
<div class="divider-demo-item">Inset on both sides</div>
<hr class="divider divider-line divider-middle" />Line styles
Combine emphasis, thickness, and line styles. Dashed and dotted lines use a stronger outline color and 1.5px thickness for visibility. Colors follow the current Material theme.
<!-- Neutral emphasis. -->
<hr class="divider divider-line divider-strong" />
<!-- Theme primary color. -->
<hr class="divider divider-line divider-accent" />
<!-- A thicker section boundary. -->
<hr class="divider divider-line divider-thick" />
<!-- Alternative decorative styles. -->
<hr class="divider divider-line divider-dashed" />
<hr class="divider divider-line divider-dotted" />Vertical
Use a flex or grid container with available height. A vertical separator needs an explicit orientation for assistive technology.
<div style="display: flex; align-items: center; min-height: 64px">
<span>Overview</span>
<div
class="divider divider-line divider-vertical"
role="separator"
aria-orientation="vertical"
></div>
<span>Details</span>
<div
class="divider divider-line divider-vertical divider-accent"
role="separator"
aria-orientation="vertical"
></div>
<span>Activity</span>
</div>With a label
Center a label or align it toward either end. These labels are ordinary text; the surrounding lines are decorative.
<div class="divider divider-line divider-label">Or continue with</div>
<div class="divider divider-line divider-label divider-label-start">Today</div>
<div class="divider divider-line divider-label divider-label-end">Earlier</div>Custom spacing
Override CSS variables per divider. Use theme tokens to keep custom colors compatible with light and dark modes.
<hr
class="divider divider-line divider-middle"
style="
--divider-inset: 32px;
--divider-spacing: 24px;
--divider-thickness: 1.5px;
--divider-color: var(--md-sys-color-tertiary);
"
/>Setup and accessibility
// Import once, after your Materialize stylesheet. No JavaScript initialization.
// Divider styles are included in Materialize CSS.Use hr for a thematic break. For a purely decorative line, use a div with aria-hidden="true". Keep labeled dividers as ordinary text; use a heading element when the label introduces a section.
Combine horizontal modifiers freely. Use vertical and labeled variants separately. Set the parent height or minimum height for vertical dividers.
| Variable | Default |
|---|---|
| --divider-color | Material outline-variant |
| --divider-thickness | 1px |
| --divider-style | solid |
| --divider-spacing | 16px |
| --divider-inset | 16px |
Component SCSS — copy into your project
// Load after Materialize. The opt-in base preserves existing .divider elements.
.divider.divider-line {
--divider-color: var(--md-sys-color-outline-variant);
--divider-thickness: 1px;
--divider-style: solid;
--divider-spacing: 16px;
--divider-inset: 16px;
display: block;
flex-shrink: 0;
height: 0;
margin: var(--divider-spacing) 0;
border: 0;
border-block-start: var(--divider-thickness) var(--divider-style) var(--divider-color);
background: transparent;
overflow: visible;
// Logical properties support both left-to-right and right-to-left layouts.
&.divider-inset {
margin-inline-start: var(--divider-inset);
}
&.divider-middle {
margin-inline: var(--divider-inset);
}
&.divider-dashed,
&.divider-dotted {
--divider-color: var(--md-sys-color-outline);
--divider-thickness: 1.5px;
}
&.divider-strong {
--divider-color: var(--md-sys-color-outline);
}
&.divider-accent {
--divider-color: var(--md-sys-color-primary);
}
&.divider-thick {
--divider-thickness: 4px;
}
&.divider-dashed {
--divider-style: dashed;
}
&.divider-dotted {
--divider-style: dotted;
}
// A flex or grid parent supplies the vertical divider's available height.
&.divider-vertical {
width: 0;
height: auto;
align-self: stretch;
margin: 0 var(--divider-spacing);
border-block-start: 0;
border-inline-start: var(--divider-thickness) var(--divider-style)
var(--divider-color);
}
// Real text stays selectable; pseudo-elements draw the surrounding lines.
&.divider-label {
display: flex;
align-items: center;
gap: 16px;
height: auto;
border: 0;
color: var(--md-sys-color-on-surface-variant);
font-size: 14px;
line-height: 1.5;
text-align: center;
&::before,
&::after {
content: '';
flex: 1;
min-width: 8px;
border-block-start: var(--divider-thickness) var(--divider-style)
var(--divider-color);
}
&.divider-label-start::before {
flex: 0 0 24px;
}
&.divider-label-end::after {
flex: 0 0 24px;
}
}
}