1 files changed, 16 insertions, 3 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
index 100f1d18793..173e62cefbd 100644
--- a/app/assets/javascripts/super_sidebar/components/nav_item.vue
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -1,11 +1,12 @@
 <script>
-import { GlCollapse, GlIcon } from '@gitlab/ui';
+import { GlCollapse, GlIcon, GlBadge } from '@gitlab/ui';
 
 export default {
   name: 'NavItem',
   components: {
     GlCollapse,
     GlIcon,
+    GlBadge,
   },
   props: {
     item: {
@@ -25,6 +26,15 @@ export default {
     isSection() {
       return Boolean(this.item?.items?.length);
     },
+    pillData() {
+      return this.item.pill_count;
+    },
+    hasPill() {
+      return (
+        Number.isFinite(this.pillData) ||
+        (typeof this.pillData === 'string' && this.pillData !== '')
+      );
+    },
     isActive() {
       if (this.isSection) {
         return !this.expanded && this.item.is_active;
@@ -84,8 +94,11 @@ export default {
           {{ item.subtitle }}
         </div>
       </div>
-      <span v-if="isSection" class="gl-flex-grow-1 gl-text-right gl-mr-3">
-        <gl-icon :name="collapseIcon" />
+      <span v-if="isSection || hasPill" class="gl-flex-grow-1 gl-text-right gl-mr-3">
+        <gl-badge v-if="hasPill" size="sm" variant="info">
+          {{ pillData }}
+        </gl-badge>
+        <gl-icon v-else-if="isSection" :name="collapseIcon" />
       </span>
     </a>
     <gl-collapse v-if="isSection" :id="item.title" v-model="expanded">