Divider

The Divider component provides a thin, unobtrusive line for grouping elements to reinforce visual hierarchy. It renders as a dark gray <hr> by default and features several useful props for quick style adjustments.

Basic divider

By default, the Divider renders as a horizontal line:

muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(p = 2, width = "100%", maxWidth = 360),
      Typography("Content above", variant = "body1"),
      Divider(),
      Typography("Content below", variant = "body1")
    )
  )
)

Divider variants

The Divider component supports three variants: "fullWidth" (default), "inset", and "middle":

muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(p = 2, width = "100%", maxWidth = 360),
      Typography("Full width variant below", variant = "body2"),
      Divider(variant = "fullWidth"),
      Typography("Inset variant below", variant = "body2", sx = list(mt = 2)),
      Divider(variant = "inset"),
      Typography("Middle variant below", variant = "body2", sx = list(mt = 2)),
      Divider(variant = "middle")
    )
  )
)

Vertical divider

Use the orientation prop to change the Divider from horizontal to vertical. When using vertical orientation, the Divider renders a <div> with the corresponding accessibility attributes instead of <hr>:

muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(
        p = 2,
        display = "flex",
        alignItems = "center",
        gap = 1
      ),
      Typography("Left content"),
      Divider(orientation = "vertical", flexItem = TRUE),
      Typography("Right content")
    )
  )
)

Vertical with flexItem

Use the flexItem prop to display the Divider when it’s being used in a flex container:

muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(
        p = 1,
        display = "inline-flex",
        alignItems = "center",
        border = '1px solid',
        borderColor = "divider",
        borderRadius = 2,
        bgcolor = "background.paper",
        color = "text.secondary",
        gap = 1
      ),
      shiny::icon("bold"),
      Divider(
        orientation = "vertical",
        flexItem = TRUE
      ),
      shiny::icon("italic"),
      Divider(
        orientation = "vertical",
        flexItem = TRUE
      ),
      shiny::icon("underline")
    )
  )
)

Divider with text

Use the Divider with child elements to create dividers with text or other content:

muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(p = 2, width = "100%"),
      Typography(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        variant = "body2",
        sx = list(mb = 2)
      ),
      Divider("CENTER"),
      Typography(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        variant = "body2",
        sx = list(my = 2)
      )
    )
  )
)

Divider text alignment

Use the textAlign prop to align elements that are wrapped by the Divider:

muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(p = 2, width = "100%"),
      Typography(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        variant = "body2"
      ),
      Divider("CENTER", textAlign = "center", sx = list(my = 2)),
      Typography(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        variant = "body2"
      ),
      Divider("LEFT", textAlign = "left", sx = list(my = 2)),
      Typography(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        variant = "body2"
      ),
      Divider("RIGHT", textAlign = "right", sx = list(my = 2)),
      Typography(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        variant = "body2"
      )
    )
  )
)

Divider with Chip

Combine the Divider with other components like Chip:

muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(p = 2, width = "100%"),
      Typography(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        variant = "body2"
      ),
      Divider(
        Chip(label = "CHIP", size = "small"),
        sx = list(my = 2)
      ),
      Typography(
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        variant = "body2"
      )
    )
  )
)

Divider in lists

When using the Divider to separate items in a List, use the component prop to render it as an <li>—otherwise it won’t be a valid HTML element:

muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(p = 2, width = "100%", maxWidth = 360),
      List(
        ListItem(ListItemText(primary = "Inbox")),
        Divider(component = "li"),
        ListItem(ListItemText(primary = "Drafts")),
        Divider(component = "li"),
        ListItem(ListItemText(primary = "Trash")),
        Divider(component = "li"),
        ListItem(ListItemText(primary = "Spam"))
      )
    )
  )
)

Accessibility

Due to its implicit role of separator, the Divider (which is an <hr> element) will be announced by screen readers as a “Horizontal Splitter” (or vertical if using the orientation prop).

If you’re using it as a purely stylistic element, set aria-hidden="true" to make screen readers bypass it:

Divider(sx = list(`aria-hidden` = "true"))

When wrapping other elements like text or chips, change the rendered element to a <div> using the component prop and set role="presentation":

Divider(
  component = "div",
  role = "presentation",
  Typography("Text element")
)

See the Material UI Divider documentation for complete API details.