SOROUSH.DESIGN
Design SystemMarkdownStyled System

MenuDivider

A line between groups of rows in a MenuList, rendered as <li role="separator">.

Source

A line between groups of rows in a MenuList, rendered as <li role="separator">. The arrow keys pass over it.

import { MenuDivider, MenuList } from '@soroush.tech/design-system/Menu'
import { MenuItem } from '@soroush.tech/design-system/MenuItem'

;<MenuList aria-label="Edit">
  <MenuItem>Cut</MenuItem>
  <MenuItem>Copy</MenuItem>
  <MenuDivider />
  <MenuItem>Select all</MenuItem>
</MenuList>

Demos

For usage examples, visit the component demo page: Menu

Import

import { MenuDivider } from '@soroush.tech/design-system/Menu'

Props

PropTypeDefaultDescription
classNamestring-Class on the separator.

Notes

  • The line is theme.borderWidths.thin in theme.border.light, with 0.5 space above and below.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.