1 files changed, 37 insertions, 0 deletions
diff --git a/app/assets/javascripts/super_sidebar/components/nav_item.vue b/app/assets/javascripts/super_sidebar/components/nav_item.vue
new file mode 100644
index 00000000000..4fd6918fd6f
--- /dev/null
+++ b/app/assets/javascripts/super_sidebar/components/nav_item.vue
@@ -0,0 +1,37 @@
+<script>
+import { GlIcon } from '@gitlab/ui';
+
+export default {
+  name: 'NavItem',
+  components: {
+    GlIcon,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <li>
+    <a
+      :href="item.link"
+      class="gl-display-flex gl-pl-3 gl-py-3 gl-line-height-normal gl-text-black-normal gl-hover-bg-t-gray-a-08"
+    >
+      <div class="gl-mr-3">
+        <slot name="icon">
+          <gl-icon v-if="item.icon" :name="item.icon" />
+        </slot>
+      </div>
+      <div class="gl-pr-3">
+        {{ item.title }}
+        <div v-if="item.subtitle" class="gl-font-sm gl-text-gray-500 gl-mt-1">
+          {{ item.subtitle }}
+        </div>
+      </div>
+    </a>
+  </li>
+</template>