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.

<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>

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.