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.

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

{content}
<Divider>Visual indicator</Divider>
{content}
<Divider>
  <Chip variant="soft" color="neutral" size="sm">
    Visual indicator
  </Chip>
</Divider>
{content}

{content}
<Divider>Visual indicator</Divider>
{content}
<Divider>
  <Chip variant="soft" color="neutral" size="sm">
    Visual indicator
  </Chip>
</Divider>
{content}

Press Enter to start editing

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. */}
</Divider>

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

{content}
<Divider orientation="vertical">Visual indicator</Divider>
{content}

{content}
<Divider orientation="vertical">Visual indicator</Divider>
{content}

Press Enter to start editing

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%

<Stack spacing={1} sx={{ fontSize: 'sm' }}>
  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
  <Divider sx={{ '--Divider-childPosition': `${position}%` }}>
    Visual indicator
  </Divider>
  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
</Stack>
<Slider
  value={position}
  min={0}
  max={100}
  step={1}
  valueLabelDisplay="on"
  valueLabelFormat={(value) => `${value}%`}
  onChange={(event, value) => setPosition(value)}
/>

<Stack spacing={1} sx={{ fontSize: 'sm' }}>
  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
  <Divider sx={{ '--Divider-childPosition': `${position}%` }}>
    Visual indicator
  </Divider>
  <Sheet variant="soft" sx={{ height: 40, borderRadius: 'xs' }} />
</Stack>
<Slider
  value={position}
  min={0}
  max={100}
  step={1}
  valueLabelDisplay="on"
  valueLabelFormat={(value) => `${value}%`}
  onChange={(event, value) => setPosition(value)}
/>

Press Enter to start editing

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

API

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

<Divider />