Skip to content
+

Divider

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

Introduction

Dividers separate content into clear groups.

<Divider />

Playground

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.
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.
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.
Press Enter to start editing

Vertical divider

Use the orientation prop to render a vertical divider.


Vertical with text

You can also render a vertical divider with content.

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

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


API

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