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.

<FormatAlignLeftIcon />
<FormatAlignCenterIcon />
<FormatAlignRightIcon />
<Divider orientation="vertical" flexItem />
<FormatBoldIcon />

<FormatAlignLeftIcon />
<FormatAlignCenterIcon />
<FormatAlignRightIcon />
<Divider orientation="vertical" flexItem />
<FormatBoldIcon />

Press Enter to start editing

Flex item

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

<FormatBoldIcon />
<Divider orientation="vertical" variant="middle" flexItem />
<FormatItalicIcon />

<FormatBoldIcon />
<Divider orientation="vertical" variant="middle" flexItem />
<FormatItalicIcon />

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.

CENTER

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

LEFT

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

RIGHT

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Chip

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<Root>
  {content}
  <Divider>CENTER</Divider>
  {content}
  <Divider textAlign="left">LEFT</Divider>
  {content}
  <Divider textAlign="right">RIGHT</Divider>
  {content}
  <Divider>
    <Chip label="Chip" size="small" />
  </Divider>
  {content}
</Root>

<Root>
  {content}
  <Divider>CENTER</Divider>
  {content}
  <Divider textAlign="left">LEFT</Divider>
  {content}
  <Divider textAlign="right">RIGHT</Divider>
  {content}
  <Divider>
    <Chip label="Chip" size="small" />
  </Divider>
  {content}
</Root>

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.

<Divider />