diff --git a/app/assets/javascripts/discourse/components/navigation-bar.js.es6 b/app/assets/javascripts/discourse/components/navigation-bar.js.es6
new file mode 100644
index 000000000..31c23f964
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/navigation-bar.js.es6
@@ -0,0 +1,5 @@
+export default Ember.Component.extend({
+  tagName: 'ul',
+  classNameBindings: [':nav', ':nav-pills'],
+  id: 'navigation-bar'
+});
diff --git a/app/assets/javascripts/discourse/templates/components/navigation-bar.hbs b/app/assets/javascripts/discourse/templates/components/navigation-bar.hbs
new file mode 100644
index 000000000..11a4f1f58
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/navigation-bar.hbs
@@ -0,0 +1,6 @@
+<ul class="nav nav-pills" id='navigation-bar'>
+  {{#each navItem in navItems}}
+    {{navigation-item content=navItem filterMode=filterMode}}
+  {{/each}}
+  {{custom-html "extraNavItem"}}
+</ul>
diff --git a/app/assets/javascripts/discourse/templates/navigation/categories.hbs b/app/assets/javascripts/discourse/templates/navigation/categories.hbs
index 1db91ae46..6ba5509e9 100644
--- a/app/assets/javascripts/discourse/templates/navigation/categories.hbs
+++ b/app/assets/javascripts/discourse/templates/navigation/categories.hbs
@@ -1,11 +1,6 @@
 {{bread-crumbs categories=categories}}
 
-<ul class="nav nav-pills" id='navigation-bar'>
-  {{#each navItem in navItems}}
-    {{navigation-item content=navItem filterMode=filterMode}}
-  {{/each}}
-  {{custom-html "extraNavItem"}}
-</ul>
+{{navigation-bar navItems=navItems filterMode=filterMode}}
 
 {{#if canCreateCategory}}
   <button class='btn btn-default' {{action "createCategory"}}><i class='fa fa-plus'></i>{{i18n 'category.create'}}</button>
diff --git a/app/assets/javascripts/discourse/templates/navigation/category.hbs b/app/assets/javascripts/discourse/templates/navigation/category.hbs
index 4a8aee557..7d874edf1 100644
--- a/app/assets/javascripts/discourse/templates/navigation/category.hbs
+++ b/app/assets/javascripts/discourse/templates/navigation/category.hbs
@@ -3,12 +3,8 @@
                noSubcategories=noSubcategories
                hideSubcategories=showingSubcategoryList}}
 
-<ul class="nav nav-pills" id='navigation-bar'>
-  {{#each navItem in navItems}}
-    {{navigation-item content=navItem filterMode=filterMode}}
-  {{/each}}
-  {{custom-html "extraNavItem"}}
-</ul>
+
+{{navigation-bar navItems=navItems filterMode=filterMode}}
 
 {{#if currentUser}}
   {{category-notifications-button category=category}}
diff --git a/app/assets/javascripts/discourse/templates/navigation/default.hbs b/app/assets/javascripts/discourse/templates/navigation/default.hbs
index d95de6b04..529dae558 100644
--- a/app/assets/javascripts/discourse/templates/navigation/default.hbs
+++ b/app/assets/javascripts/discourse/templates/navigation/default.hbs
@@ -6,12 +6,7 @@
 {{else}}
 {{bread-crumbs categories=categories}}
 
-<ul class="nav nav-pills" id='navigation-bar'>
-  {{#each navItem in navItems}}
-    {{navigation-item content=navItem filterMode=filterMode}}
-  {{/each}}
-  {{custom-html "extraNavItem"}}
-</ul>
+{{navigation-bar navItems=navItems filterMode=filterMode}}
 
 {{#if canCreateTopic}}
   <button id="create-topic" class='btn btn-default' {{action "createTopic"}}><i class='fa fa-plus'></i>{{i18n 'topic.create'}}</button>