Divider

A divider is a thin line that groups content in lists and layouts.

Introduction

Dividers separate content into clear groups.

<Divider />

Playground

orientation

horizontal

vertical

children

Component

After installation, you can start building with this component using the following basic elements:

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

export default function MyApp() {
  return <Divider />;
}

Rendered with content

Use the Divider to wrap elements that will be added to it.

When using the Divider component for visual decoration, such as in a heading, explicitly specify role="presentation" on it to make sure screen readers can announce its content:

<Divider component="div" role="presentation">
  {/* any elements nested inside the role="presentation" preserve their semantics. */}
  <Typography variant="h2">My Heading</Typography>
</Divider>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id dignissim justo. Nulla ut facilisis ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed malesuada lobortis pretium.

Visual indicator

Vertical divider

Use the orientation prop to render a vertical divider.

Vertical with text

You can also render a vertical divider with content.

Visual indicator

Child position

To control the position of the content, override the CSS variable --Divider-childPosition via sx prop.

<Divider sx={{ '--Divider-childPosition': '20%' }}> {/* the value can be any CSS valid unit */}

Visual indicator

50%

Automatic adjustment

When the Divider is a direct child of either a Card or ModalDialog, it will automatically adapt to their spacing and orientation.

Card

Note how the Dividerstretches by default from edge to edge of the Card. It will also adapt to the Card orientation.

horizontal

Headline

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s

ModalDialog

The same edge to edge stretching happens with the ModalDialog as well. To opt-out from the automatic adjustment, use inset="none" on the divider.

Common examples

Fullscreen overflow

Here is a CSS trick that lets you stretch the divider outside of its parent's boundary.

Use box-shadow with 100vmax unit to fill the outer space and then remove the vertical overflow by using clip-path: inset(0px -100vmax).

box-shadowclip-path