1 files changed, 24 insertions, 3 deletions
diff --git a/app/assets/javascripts/nav/components/top_nav_menu_item.vue b/app/assets/javascripts/nav/components/top_nav_menu_item.vue
index a0d92811a6f..08b2fbf2ed1 100644
--- a/app/assets/javascripts/nav/components/top_nav_menu_item.vue
+++ b/app/assets/javascripts/nav/components/top_nav_menu_item.vue
@@ -1,5 +1,10 @@
 <script>
 import { GlButton, GlIcon } from '@gitlab/ui';
+import { kebabCase, mapKeys } from 'lodash';
+
+const getDataKey = (key) => `data-${kebabCase(key)}`;
+
+const ACTIVE_CLASS = 'gl-shadow-none! gl-font-weight-bold! active';
 
 export default {
   components: {
@@ -11,7 +16,18 @@ export default {
       type: Object,
       required: true,
     },
+    iconOnly: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    dataAttrs() {
+      return mapKeys(this.menuItem.data || {}, (value, key) => getDataKey(key));
+    },
   },
+  ACTIVE_CLASS,
 };
 </script>
 
@@ -20,12 +36,17 @@ export default {
     category="tertiary"
     :href="menuItem.href"
     class="top-nav-menu-item gl-display-block"
+    :class="[menuItem.css_class, { [$options.ACTIVE_CLASS]: menuItem.active }]"
+    :aria-label="menuItem.title"
+    v-bind="dataAttrs"
     v-on="$listeners"
   >
     <span class="gl-display-flex">
-      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" class="gl-mr-2!" />
-      {{ menuItem.title }}
-      <gl-icon v-if="menuItem.view" name="chevron-right" class="gl-ml-auto" />
+      <gl-icon v-if="menuItem.icon" :name="menuItem.icon" :class="{ 'gl-mr-2!': !iconOnly }" />
+      <template v-if="!iconOnly">
+        {{ menuItem.title }}
+        <gl-icon v-if="menuItem.view" name="chevron-right" class="gl-ml-auto" />
+      </template>
     </span>
   </gl-button>
 </template>