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.

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

:::::

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

:::::

::::::