diff --git a/spec/javascripts/fixtures/project_title.html.haml b/spec/javascripts/fixtures/project_title.html.haml
index e5850b62659acfb7126d1b519ee90118648f1cb7..3696f241c21cb8cc49a8e1bc684bf0517df87e06 100644
--- a/spec/javascripts/fixtures/project_title.html.haml
+++ b/spec/javascripts/fixtures/project_title.html.haml
@@ -1,7 +1,19 @@
-%h1.title
-  %a
-    GitLab Org
-  %a.project-item-select-holder{href: "/gitlab-org/gitlab-test"}
-    GitLab Test
-    %input#project_path.project-item-select.js-projects-dropdown.ajax-project-select{type: "hidden", name: "project_path", "data-include-groups" => "false"}
-  %i.fa.chevron-down.dropdown-toggle-caret.js-projects-dropdown-toggle
+.header-content
+  %h1.title
+    %a
+      GitLab Org
+    %a.project-item-select-holder{href: "/gitlab-org/gitlab-test"}
+      GitLab Test
+    %i.fa.chevron-down.dropdown-toggle-caret.js-projects-dropdown-toggle{ "data-toggle" => "dropdown", "data-target" => ".header-content" }
+  .dropdown-menu.dropdown-select.dropdown-menu-projects
+    .dropdown-title
+      %span Go to a project
+      %button.dropdown-title-button.dropdown-menu-close{"aria-label" => "Close", type: "button"}
+        %i.fa.fa-times.dropdown-menu-close-icon
+    .dropdown-input
+      %input.dropdown-input-field{id: "", placeholder: "Search your projects", type: "search", value: ""}
+      %i.fa.fa-search.dropdown-input-search
+      %i.fa.fa-times.dropdown-input-clear.js-dropdown-input-clear{role: "button"}
+    .dropdown-content
+    .dropdown-loading
+      %i.fa.fa-spinner.fa-spin
diff --git a/spec/javascripts/project_title_spec.js.coffee b/spec/javascripts/project_title_spec.js.coffee
index 47c7b7febe35bf55398160881613539b36d8ce57..3d8de2ff989bde00db9d7964192a35f0188289be 100644
--- a/spec/javascripts/project_title_spec.js.coffee
+++ b/spec/javascripts/project_title_spec.js.coffee
@@ -1,4 +1,6 @@
+#= require bootstrap
 #= require select2
+#= require gl_dropdown
 #= require api
 #= require project_select
 #= require project
@@ -14,9 +16,6 @@ describe 'Project Title', ->
     fixture.load('project_title.html')
     @project = new Project()
 
-    spyOn(@project, 'changeProject').and.callFake (url) ->
-      window.current_project_url = url
-
   describe 'project list', ->
     beforeEach =>
       @projects_data = fixture.load('projects.json')[0]
@@ -29,18 +28,9 @@ describe 'Project Title', ->
 
     it 'to show on toggle click', =>
       $('.js-projects-dropdown-toggle').click()
-
-      expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(true)
-      expect($('.ajax-project-dropdown li').length).toBe(@projects_data.length)
+      expect($('.header-content').hasClass('open')).toBe(true)
 
     it 'hide dropdown', ->
-      $("#select2-drop-mask").click()
-
-      expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(false)
-
-    it 'change project when clicking item', ->
-      $('.js-projects-dropdown-toggle').click()
-      $('.ajax-project-dropdown li:nth-child(2)').trigger('mouseup')
+      $(".dropdown-menu-close-icon").click()
 
-      expect($('.title .select2-container').hasClass('select2-dropdown-open')).toBe(false)
-      expect(window.current_project_url).toBe('http://localhost:3000/h5bp/html5-boilerplate')
+      expect($('.header-content').hasClass('open')).toBe(false)