---
schema_version: "1"
id: 2ca3a2dd8aa22610d851e46a3e13ee20aa41cf318dcbecf7d7b6392faadaa6cd
title: Menu Divider
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/menuDivider/lightning-menu-divider.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-menu-divider.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 5a62d695bb62aede3ead5f068b894a6c03b9d4cbeab7464542cbc1e390205be9
products:
  - Lightning Component Reference
---

# 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`](/docs/platform/lightning-component-reference/guide/lightning-button-menu.html) 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.

<!-- prettier-ignore-start -->
```html
<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>
```
<!-- prettier-ignore-end -->

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

<!-- prettier-ignore-start -->
```html
<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>
```
<!-- prettier-ignore-end -->

For further customization of button menus, use [`lightning-menu-subheader`](/docs/platform/lightning-component-reference/guide/lightning-menu-subheader.html) to create subheaders in the list of items. You can place dividers under subheaders or menu items.

<!-- prettier-ignore-start -->
```html
<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>
```
<!-- prettier-ignore-end -->


:::::

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

:::::

::::::