Divider

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

Introduction

Dividers separate content into clear groups.

Component

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

import Avatar 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.

Vertical divider

Use the orientation prop to render a vertical divider.

Vertical with text

You can also render a vertical divider with content.

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

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.

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).