Lightning Components Developer Guide
jNewer Version Available
lightning:verticalNavigationItemBadge
A link and badge within a lightning:verticalNavigationSection or lightning:verticalNavigationOverflow. This component requires API version 41.0 and later.
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 label="Recent" name="recent" badgeCount="3" />
5 <lightning:verticalNavigationItem label="Created by Me" name="usercreated" />
6 <lightning:verticalNavigationItem label="Private Reports" name="private" />
7 <lightning:verticalNavigationItem label="Public Reports" name="public" />
8 <lightning:verticalNavigationItem label="All Reports" name="all" />
9 </lightning:verticalNavigationSection>
10 </lightning:verticalNavigation>
11</aura:component>Attributes
| 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. |