Divider

{{"component": "@mui/internal-core-docs/ComponentLinkHeader"}}

Introduction

The Material UI Divider component renders as a dark gray <hr> by default, and features several useful props for quick style adjustments.

{{"demo": "IntroDivider.js", "bg": true}}

Basics

import Divider from '@mui/material/Divider';

Variants

The Divider component supports three variants: fullWidth (default), inset, and middle.

{{"demo": "DividerVariants.js", "bg": true}}

Orientation

Use the orientation prop to change the Divider from horizontal to vertical. When using vertical orientation, the Divider renders a <div> with the corresponding accessibility attributes instead of <hr> to adhere to the WAI-ARIA spec.

{{"demo": "VerticalDividers.js", "bg": true}}

Flex item

Use the flexItem prop to display the Divider when it's being used in a flex container.

{{"demo": "FlexDivider.js", "bg": true}}

With children

Use the textAlign prop to align elements that are wrapped by the Divider.

{{"demo": "DividerText.js", "bg": true}}

Customization

Use with a List

When using the Divider to separate items in a List, use the component prop to render it as an <li>—otherwise it won't be a valid HTML element.

{{"demo": "ListDividers.js", "bg": true}}

Icon grouping

The demo below shows how to combine the props variant="middle" and orientation="vertical".

{{"demo": "VerticalDividerMiddle.js", "bg": true}}

Accessibility

Due to its implicit role of separator, the Divider, which is a <hr> element, will be announced by screen readers as a "Horizontal Splitter" (or vertical, if you're using the orientation prop).

If you're using it as a purely stylistic element, we recommend setting aria-hidden="true" which will make screen readers bypass it.

<Divider aria-hidden="true" />

If you're using the Divider to wrap other elements, such as text or chips, we recommend changing its rendered element to a plain <div> using the component prop, and setting role="presentation". This ensures that it's not announced by screen readers while still preserving the semantics of the elements inside it.

<Divider component="div" role="presentation">
  <Typography>Text element</Typography>
</Divider>

Anatomy

The Divider component is composed of a root <hr>.

<hr class="MuiDivider-root">
  <!-- Divider children goes here -->
</hr>