Vertical Navigation Item Badge | Legacy Components | Lightning Component Reference

lightning:verticalNavigationItemBadge

A link and badge within a lightning:verticalNavigationSection or lightning:verticalNavigationOverflow. This component requires API version 41.0 and later.

For Aura components only. For LWC development, use lightning-vertical-navigation-item-badge.

For Use In

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

A lightning:verticalNavigationItemBadge 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<aura:component>
2  <lightning:verticalNavigation selectedItem="recent">
3    <lightning:verticalNavigationSection label="Reports">
4      <lightning:verticalNavigationItemBadge
5        label="Recent"
6        name="recent"
7        badgeCount="3"
8      />
9      <lightning:verticalNavigationItem
10        label="Created by Me"
11        name="usercreated"
12      />
13      <lightning:verticalNavigationItem
14        label="Private Reports"
15        name="private"
16      />
17      <lightning:verticalNavigationItem label="Public Reports" name="public" />
18      <lightning:verticalNavigationItem label="All Reports" name="all" />
19    </lightning:verticalNavigationSection>
20  </lightning:verticalNavigation>
21</aura:component>

Attributes

Name	Description	Type	Default
assistiveText	Assistive text describing the number in the badge. This is used to enhance accessibility and is not displayed to the user.	String	New Items
badgeCount	The number to show inside the badge. If this value is zero the badge will be hidden.	Integer
body	The body of the component. In markup, this is everything in the body of the tag.	Aura.Component[]
class	A CSS class for the outer element, in addition to the component's base classes.	String
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
title	Displays tooltip text when the mouse moves over the element.	String