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.
<aura:component> <lightning:verticalNavigation selectedItem="recent"> <lightning:verticalNavigationSection label="Reports"> <lightning:verticalNavigationItemBadge label="Recent" name="recent" badgeCount="3" /> <lightning:verticalNavigationItem label="Created by Me" name="usercreated" /> <lightning:verticalNavigationItem label="Private Reports" name="private" /> <lightning:verticalNavigationItem label="Public Reports" name="public" /> <lightning:verticalNavigationItem label="All Reports" name="all" /> </lightning:verticalNavigationSection> </lightning:verticalNavigation> </aura:component>
Attribute Name | Attribute type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
title | String | Displays tooltip text when the mouse moves over the element. | |
label | String | The text displayed for this navigation item. | Yes |
name | String | A unique identifier for this navigation item. | Yes |
href | String | The URL of the page that the navigation item goes to. | |
badgeCount | Integer | The number to show inside the badge. If this value is zero the badge will be hidden. | |
assistiveText | String | Assistive text describing the number in the badge. This is used to enhance accessibility and is not displayed to the user. |