---
schema_version: "1"
id: 47265b802927e158f003d8e0147690cdab0ee504a0bad7435aea2ce467996cb1
title: Menu Subheader
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/menuSubheader/lightning-menu-subheader.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-menu-subheader.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 14961e9ff84ed5cf23018ce5d00fee79cef8912af477ee4829bc703e9a14a378
products:
  - Lightning Component Reference
---

# Menu Subheader

**`lightning-menu-subheader`**

Creates a subheader in the list of items in 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="menuSubheader" model="lwc" namespace="lightning"}


:::::

:::::tab

The `lightning-menu-subheader` component creates a heading in the list of menu items in a
[`lightning-button-menu`](/docs/platform/lightning-component-reference/guide/lightning-button-menu.html) component.
The heading appears in bold text and is slightly larger than menu item text.
Subheaders can help categorize items and improve usability for long lists.

Specify the text of the heading using the `label` attribute.

Nest the component inside `lightning-button-menu` before the `lightning-menu-item` where you want the header. Use `lightning-menu-subheader` as a sibling of `lightning-menu-item`, not as a child component.

This example shows a dropdown menu with subheaders.

<!-- 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-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-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 -->

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


:::::

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

:::::

::::::