Menu Subheader | Components | Lightning Component Reference

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

The lightning-menu-subheader component creates a heading in the list of menu items in a lightning-button-menu 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.

1<template>
2    <lightning-button-menu label="Veggies">
3        <lightning-menu-subheader label="Leafy Greens">
4        </lightning-menu-subheader>
5        <lightning-menu-item label="Spinach"> </lightning-menu-item>
6        <lightning-menu-item label="Kale"> </lightning-menu-item>
7        <lightning-menu-subheader label="Summer Squash">
8        </lightning-menu-subheader>
9        <lightning-menu-item label="Zucchini"> </lightning-menu-item>
10        <lightning-menu-item label="Yellow Squash"> </lightning-menu-item>
11        <lightning-menu-subheader label="Root Vegetables">
12        </lightning-menu-subheader>
13        <lightning-menu-item label="Carrot"> </lightning-menu-item>
14        <lightning-menu-item label="Parsnip"> </lightning-menu-item>
15    </lightning-button-menu>
16</template>

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

Attributes

Name	Description	Type	Default	Required
label	The text displayed in the subheader.	string