---
schema_version: "1"
id: 49a630c32adfc6554a16595570e4419d7efc9014e8c0a6e7d1f0108c57bbe6bb
title: Vertical Navigation Item Badge
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/lwc/components/lightning/verticalNavigationItemBadge/lightning-vertical-navigation-item-badge.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/lightning-vertical-navigation-item-badge.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 998750a26b5f9632e0ecf415926fb10fcf6026d6b6561a17687a9c38486e2dda
products:
  - Lightning Component Reference
---

# Vertical Navigation Item Badge

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

::::::tabset{tabs='["Example", "Develop", "Specifications"]'}

:::::tab

::component-playground{component="verticalNavigationItemBadge" model="lwc" namespace="lightning"}


:::::

:::::tab

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.

<!-- prettier-ignore-start -->
```html
<template>
    <lightning-vertical-navigation selected-item="recent">
        <lightning-vertical-navigation-section label="Reports">
            <lightning-vertical-navigation-item-badge
                label="Recent"
                name="recent"
                badge-count="3"
            >
            </lightning-vertical-navigation-item-badge>
            <lightning-vertical-navigation-item
                label="Created by Me"
                name="usercreated"
            >
            </lightning-vertical-navigation-item>
            <lightning-vertical-navigation-item
                label="Private Reports"
                name="private"
            >
            </lightning-vertical-navigation-item>
            <lightning-vertical-navigation-item
                label="Public Reports"
                name="public"
            >
            </lightning-vertical-navigation-item>
            <lightning-vertical-navigation-item label="All Reports" name="all">
            </lightning-vertical-navigation-item>
        </lightning-vertical-navigation-section>
    </lightning-vertical-navigation>
</template>
```
<!-- prettier-ignore-end -->


:::::

:::::tab
::component-specification{component="verticalNavigationItemBadge" model="lwc" namespace="lightning"}

:::::

::::::