Menu Divider

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

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="menuDivider" model="lwc" namespace="lightning"}

:::::

:::::tab

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.

<template>
    <lightning-button-menu label="Veggies">
        <lightning-menu-item label="Spinach"> </lightning-menu-item>
        <lightning-menu-item label="Kale"> </lightning-menu-item>
        <lightning-menu-divider> </lightning-menu-divider>
        <lightning-menu-item label="Zucchini"> </lightning-menu-item>
        <lightning-menu-item label="Yellow Squash"> </lightning-menu-item>
        <lightning-menu-divider> </lightning-menu-divider>
        <lightning-menu-item label="Carrot"> </lightning-menu-item>
        <lightning-menu-item label="Parsnip"> </lightning-menu-item>
    </lightning-button-menu>
</template>

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

<template>
    <lightning-button-menu label="Veggies">
        <lightning-menu-item label="Spinach"> </lightning-menu-item>
        <lightning-menu-item label="Kale"> </lightning-menu-item>
        <lightning-menu-divider variant="compact"> </lightning-menu-divider>
        <lightning-menu-item label="Zucchini"> </lightning-menu-item>
        <lightning-menu-item label="Yellow Squash"> </lightning-menu-item>
        <lightning-menu-divider variant="compact"> </lightning-menu-divider>
        <lightning-menu-item label="Carrot"> </lightning-menu-item>
        <lightning-menu-item label="Parsnip"> </lightning-menu-item>
    </lightning-button-menu>
</template>

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.

<template>
    <lightning-button-menu label="Veggies">
        <lightning-menu-subheader label="Leafy Greens">
        </lightning-menu-subheader>
        <lightning-menu-item label="Spinach"> </lightning-menu-item>
        <lightning-menu-item label="Kale"> </lightning-menu-item>
        <lightning-menu-divider variant="compact"> </lightning-menu-divider>
        <lightning-menu-subheader label="Summer Squash">
        </lightning-menu-subheader>
        <lightning-menu-item label="Zucchini"> </lightning-menu-item>
        <lightning-menu-item label="Yellow Squash"> </lightning-menu-item>
        <lightning-menu-divider variant="compact"> </lightning-menu-divider>
        <lightning-menu-subheader label="Root Vegetables">
        </lightning-menu-subheader>
        <lightning-menu-item label="Carrot"> </lightning-menu-item>
        <lightning-menu-item label="Parsnip"> </lightning-menu-item>
    </lightning-button-menu>
</template>

:::::

:::::tab ::component-specification{component="menuDivider" model="lwc" namespace="lightning"}

:::::

::::::