Menu Divider | Components | Lightning Component Reference

lightning-menu-divider

Creates a divider in the list of items for lightning-button-menu.

For Use In

Lightning Experience, Experience Builder Sites, Salesforce Mobile App, Lightning Out (Beta), Standalone Lightning App, Mobile Offline

The lightning-menu-divider component creates a dividing line after a menu item in a lightning-button-menu component. Use a menu divider to introduce a break between item categories or separate items into groups, for example.

To draw a line after a menu item, nest the component inside lightning-button-menu after the lightning-menu-item where you want the line. Use lightning-menu-divider as a sibling of lightning-menu-item, not as a child component.

This example shows a dropdown menu with two dividers.

By default, space is added above and below the divider. Use variant="compact" with lightning-menu-divider to reduce the space.

For further customization of button menus, use lightning-menu-subheader to create subheaders in the list of items. You can place dividers under subheaders or menu items.