Vertical Navigation Item Badge | Components | Lightning Component Reference

lightning-vertical-navigation-item-badge

A link and badge within lightning-vertical-navigation-section or lightning-vertical-navigation-overflow.

For Use In

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

A lightning-vertical-navigation-item-badge component is a navigation item that displays a numerical badge to the right of the item label.

Here’s an example that creates a navigation menu with an item containing a badge.

1<template>
2    <lightning-vertical-navigation selected-item="recent">
3        <lightning-vertical-navigation-section label="Reports">
4            <lightning-vertical-navigation-item-badge
5                label="Recent"
6                name="recent"
7                badge-count="3"
8            >
9            </lightning-vertical-navigation-item-badge>
10            <lightning-vertical-navigation-item
11                label="Created by Me"
12                name="usercreated"
13            >
14            </lightning-vertical-navigation-item>
15            <lightning-vertical-navigation-item
16                label="Private Reports"
17                name="private"
18            >
19            </lightning-vertical-navigation-item>
20            <lightning-vertical-navigation-item
21                label="Public Reports"
22                name="public"
23            >
24            </lightning-vertical-navigation-item>
25            <lightning-vertical-navigation-item label="All Reports" name="all">
26            </lightning-vertical-navigation-item>
27        </lightning-vertical-navigation-section>
28    </lightning-vertical-navigation>
29</template>

Attributes

Name	Description	Type	Default
assistive-text	Assistive text describing the number in the badge, which enhances accessibility and is not displayed to the user. The default is "New Items".	string
badge-count	The number to show inside the badge. If this value is zero, the badge is hidden. The default value is zero.	number	0
href	The URL of the page that the navigation item goes to.	string
label	The text displayed for this navigation item.	string
name	A unique identifier for this navigation item.	string