Skip to content
+

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.

Toothbrush
$4.50

Pinstriped cornflower blue cotton blouse takes you on a walk to the park or just down the hall.


Select type

Soft
Medium
Hard

Basics

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

Variants

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

  • Full width variant below
  • Inset variant below
  • Middle variant below
  • List item

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.

Press Enter to start editing

Flex item

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

Press Enter to start editing

With children

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Press Enter to start editing

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.

  • Inbox
  • Drafts
  • Trash
  • Spam

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.