divider.md

product	title	githubLabel
joy-ui	React Divider component	component: divider

Divider

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

Introduction

Dividers separate content into clear groups.

{{"demo": "DividerUsage.js", "hideToolbar": "true", "bg": "gradient"}}

{{"component": "modules/components/ComponentLinkHeader.js", "design": false}}

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.

:::info ♿️ a11y tip: 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>

:::

{{"demo": "DividerText.js"}}

Vertical divider

Use the orientation prop to render a vertical divider.

{{"demo": "VerticalDividers.js"}}

Vertical with text

You can also render a vertical divider with content.

{{"demo": "VerticalDividerText.js"}}

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

{{"demo": "DividerChildPosition.js"}}

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.

{{"demo": "DividerInCard.js"}}

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.

{{"demo": "DividerInModalDialog.js"}}

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

{{"demo": "FullscreenOverflowDivider.js"}}

:::info The var(--Divider-lineColor) is defined by the Divider component so you can refer to it without hard-coding the value or accessing to the theme. :::