Divider

The Divider component provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy.

Introduction

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

Basics

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

Variants

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

Orientation

Use the orientation prop to change the Divider from horizontal to vertical.

Flex item

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

With children

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

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.

Icon grouping

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

Accessibility

Due to its implicit role of separator, the Divider, which is a <hr> element, will be announced by screen readers as a "Horziontal 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">
  <Typograph>Text element</Typography>
</Divider>

Anatomy

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

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

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

• <Divider />