uses AJAX to select the projects

app/assets/javascripts/project.js.coffee

@@ -50,3 +50,13 @@ class @Project
       $('#notifications-button').empty().append("<i class='fa fa-bell'></i>" + label + "<i class='fa fa-angle-down'></i>")
       $(@).parents('ul').find('li.active').removeClass 'active'
       $(@).parent().addClass 'active'
+
+    @._projectSelectDropdown()
+
+  _projectSelectDropdown: ->
+    new ProjectSelect()
+
+    $('.js-projects-dropdown-toggle').on 'click', (e) ->
+      e.preventDefault()
+
+      $('.js-projects-dropdown').select2 'open'

app/assets/stylesheets/framework/common.scss

@@ -376,11 +376,11 @@ table {
   margin-bottom: $gl-padding;
 }
 
-.new-project-item-select-holder {
+.project-item-select-holder {
   display: inline-block;
   position: relative;
 
-  .new-project-item-select {
+  .project-item-select {
     position: absolute;
     top: 0;
     right: 0;

app/assets/stylesheets/framework/header.scss

@@ -88,34 +88,12 @@ header {
         }
       }
 
-      .dropdown {
-        display: inline-block;
-      }
-
-      .dropdown-menu {
-        max-height: 300px;
-        overflow: auto;
-      }
-
       .dropdown-toggle-caret {
         position: relative;
         top: -2px;
         margin-left: 5px;
         font-size: 10px;
       }
-
-      .dropdown-item {
-        &.active {
-          .dropdown-link {
-            color: #fff;
-          }
-        }
-
-        .dropdown-link:hover {
-          color: #fff;
-          text-decoration: none;
-        }
-      }
     }
 
     .navbar-collapse {

app/helpers/projects_helper.rb

@@ -56,23 +56,11 @@ module ProjectsHelper
 
     all_projects = current_user.authorized_projects.sorted_by_activity.non_archived
 
-    project_link = content_tag :div, {class: "dropdown"} do
-      output = content_tag :a, {class: "dropdown-toggle", href: "#", data: {toggle: "dropdown"}} do
-        btnOutput = simple_sanitize(project.name)
-        btnOutput += content_tag :span, nil, {class: "fa fa-chevron-down dropdown-toggle-caret"}
-      end
-
-      list = all_projects.map do |project|
-        content_tag :li, {class: "dropdown-item #{"active" if project_id == project.id}"} do
-          link_to project_path(project), {class: "dropdown-link"} do
-            project.owner.name + ' / ' + simple_sanitize(project.name)
-          end
-        end
-      end
+    project_link = link_to project_path(project), {class: "project-item-select-holder js-projects-dropdown-toggle"} do
+      link_output = simple_sanitize(project.name)
+      link_output += content_tag :span, nil, {class: "fa fa-chevron-down dropdown-toggle-caret"}
 
-      output += content_tag :ul, {class: "dropdown-menu"} do
-        list.join.html_safe
-      end
+      link_output += project_select_tag :project_path, class: "project-item-select js-projects-dropdown", data: { include_groups: false }
     end
 
     full_title = namespace_link + ' / ' + project_link

app/views/shared/_new_project_item_select.html.haml

 - if @projects.any?
-  .prepend-left-10.new-project-item-select-holder
-    = project_select_tag :project_path, class: "new-project-item-select", data: { include_groups: local_assigns[:include_groups] }
+  .prepend-left-10.project-item-select-holder
+    = project_select_tag :project_path, class: "project-item-select", data: { include_groups: local_assigns[:include_groups] }
     %a.btn.btn-new.new-project-item-select-button
       = icon('plus')
       = local_assigns[:label]
@@ -8,12 +8,12 @@
 
   :javascript
     $('.new-project-item-select-button').on('click', function() {
-      $('.new-project-item-select').select2('open');
+      $('.project-item-select').select2('open');
     });
 
     var relativePath = '#{local_assigns[:path]}';
 
-    $('.new-project-item-select').on('click', function() {
+    $('.project-item-select').on('click', function() {
       window.location = $(this).val() + '/' + relativePath;
     });