Menu Divider | Legacy Components | Lightning Component Reference

lightning:menuDivider

Creates a divider in the list of items for lightning:buttonMenu.

For Aura components only. For LWC development, use lightning-menu-divider.

For Use In

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

The lightning:menuDivider component creates a dividing line after a menu item in a lightning:buttonMenu 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:buttonMenu after the lightning:menuItem where you want the line. Use lightning:menuDivider as a sibling of lightning:menuItem, not as a child component.

This example shows a dropdown menu with two dividers.

1<aura:component>
2  <lightning:buttonMenu label="Veggies">
3    <lightning:menuItem label="Spinach"> </lightning:menuItem>
4    <lightning:menuItem label="Kale"> </lightning:menuItem>
5    <lightning:menuDivider> </lightning:menuDivider>
6    <lightning:menuItem label="Zucchini"> </lightning:menuItem>
7    <lightning:menuItem label="Yellow Squash"> </lightning:menuItem>
8    <lightning:menuDivider> </lightning:menuDivider>
9    <lightning:menuItem label="Carrot"> </lightning:menuItem>
10    <lightning:menuItem label="Parsnip"> </lightning:menuItem>
11  </lightning:buttonMenu>
12</aura:component>

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

1<aura:component>
2  <lightning:buttonMenu label="Veggies">
3    <lightning:menuItem label="Spinach"> </lightning:menuItem>
4    <lightning:menuItem label="Kale"> </lightning:menuItem>
5    <lightning:menuDivider variant="compact"> </lightning:menuDivider>
6    <lightning:menuItem label="Zucchini"> </lightning:menuItem>
7    <lightning:menuItem label="Yellow Squash"> </lightning:menuItem>
8    <lightning:menuDivider variant="compact"> </lightning:menuDivider>
9    <lightning:menuItem label="Carrot"> </lightning:menuItem>
10    <lightning:menuItem label="Parsnip"> </lightning:menuItem>
11  </lightning:buttonMenu>
12</aura:component>

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

1<aura:component>
2  <lightning:buttonMenu label="Veggies">
3    <lightning:menuSubheader label="Leafy Greens"> </lightning:menuSubheader>
4    <lightning:menuItem label="Spinach"> </lightning:menuItem>
5    <lightning:menuItem label="Kale"> </lightning:menuItem>
6    <lightning:menuDivider variant="compact"> </lightning:menuDivider>
7    <lightning:menuSubheader label="Summer Squash"> </lightning:menuSubheader>
8    <lightning:menuItem label="Zucchini"> </lightning:menuItem>
9    <lightning:menuItem label="Yellow Squash"> </lightning:menuItem>
10    <lightning:menuDivider variant="compact"> </lightning:menuDivider>
11    <lightning:menuSubheader label="Root Vegetables"> </lightning:menuSubheader>
12    <lightning:menuItem label="Carrot"> </lightning:menuItem>
13    <lightning:menuItem label="Parsnip"> </lightning:menuItem>
14  </lightning:buttonMenu>
15</aura:component>

Attributes

Name	Description	Type	Default
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS class for the outer element, in addition to the component's base classes.	String
title	Displays tooltip text when the mouse moves over the element.	String
variant	Changes the spacing above and below the divider. Accepted variants include standard and compact. The compact variant decreases the space.	String	standard