1 files changed, 31 insertions, 0 deletions
diff --git a/app/assets/javascripts/header_search/components/header_search_scoped_items.vue b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
new file mode 100644
index 00000000000..645eba05148
--- /dev/null
+++ b/app/assets/javascripts/header_search/components/header_search_scoped_items.vue
@@ -0,0 +1,31 @@
+<script>
+import { GlDropdownItem } from '@gitlab/ui';
+import { mapState, mapGetters } from 'vuex';
+
+export default {
+  name: 'HeaderSearchScopedItems',
+  components: {
+    GlDropdownItem,
+  },
+  computed: {
+    ...mapState(['search']),
+    ...mapGetters(['scopedSearchOptions']),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-dropdown-item
+      v-for="(option, index) in scopedSearchOptions"
+      :id="`scoped-${index}`"
+      :key="index"
+      tabindex="-1"
+      :href="option.url"
+    >
+      "<span class="gl-font-weight-bold">{{ search }}</span
+      >" {{ option.description }}
+      <span v-if="option.scope" class="gl-font-style-italic">{{ option.scope }}</span>
+    </gl-dropdown-item>
+  </div>
+</template>