diff --git a/app/assets/javascripts/discourse/components/group-navigation.js.es6 b/app/assets/javascripts/discourse/components/group-navigation.js.es6
new file mode 100644
index 00000000000..35f5f238e47
--- /dev/null
+++ b/app/assets/javascripts/discourse/components/group-navigation.js.es6
@@ -0,0 +1,15 @@
+import computed from 'ember-addons/ember-computed-decorators';
+
+export default Ember.Component.extend({
+  tagName: '',
+
+  @computed('group')
+  availableTabs(group) {
+    return this.get('tabs').filter(t => {
+      if (t.admin) {
+        return this.currentUser ? this.currentUser.canManageGroup(group) : false;
+      }
+      return true;
+    });
+  }
+});
diff --git a/app/assets/javascripts/discourse/controllers/group.js.es6 b/app/assets/javascripts/discourse/controllers/group.js.es6
index 4734ac8db45..98e4687f893 100644
--- a/app/assets/javascripts/discourse/controllers/group.js.es6
+++ b/app/assets/javascripts/discourse/controllers/group.js.es6
@@ -1,14 +1,11 @@
 import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 
-var Tab = Em.Object.extend({
-  @computed('name')
-  location(name) {
-    return 'group.' + name;
-  },
-
-  @computed('name', 'i18nKey')
-  message(name, i18nKey) {
-    return I18n.t(`groups.${i18nKey || name}`);
+const Tab = Ember.Object.extend({
+  init() {
+    this._super();
+    let name = this.get('name');
+    this.set('route', this.get('route') || `group.` + name);
+    this.set('message', I18n.t(`groups.${this.get('i18nKey') || name}`));
   }
 });
 
@@ -18,13 +15,13 @@ export default Ember.Controller.extend({
   showing: 'members',
 
   tabs: [
-    Tab.create({ name: 'members', 'location': 'group.index', icon: 'users' }),
+    Tab.create({ name: 'members', route: 'group.index', icon: 'users' }),
     Tab.create({ name: 'activity' }),
     Tab.create({
-      name: 'edit', i18nKey: 'edit.title', icon: 'pencil', requiresGroupAdmin: true
+      name: 'edit', i18nKey: 'edit.title', icon: 'pencil', admin: true
     }),
     Tab.create({
-      name: 'logs', i18nKey: 'logs.title', icon: 'list-alt', requiresGroupAdmin: true
+      name: 'logs', i18nKey: 'logs.title', icon: 'list-alt', admin: true
     })
   ],
 
@@ -58,21 +55,6 @@ export default Ember.Controller.extend({
     this.get('tabs')[0].set('count', this.get('model.user_count'));
   },
 
-  @computed('model.is_group_owner', 'model.automatic')
-  getTabs() {
-    return this.get('tabs').filter(t => {
-      let canSee = true;
-
-      if (this.currentUser && t.requiresGroupAdmin) {
-        canSee = this.currentUser.canManageGroup(this.get('model'));
-      } else if (t.requiresGroupAdmin) {
-        canSee = false;
-      }
-
-      return canSee;
-    });
-  },
-
   actions: {
     messageGroup() {
       this.send('createNewMessageViaParams', this.get('model.name'));
diff --git a/app/assets/javascripts/discourse/templates/components/group-navigation.hbs b/app/assets/javascripts/discourse/templates/components/group-navigation.hbs
new file mode 100644
index 00000000000..8501e9e2f54
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/group-navigation.hbs
@@ -0,0 +1,11 @@
+{{#mobile-nav class='group-nav' desktopClass="nav nav-pills" currentPath=currentPath}}
+  {{#each availableTabs as |tab|}}
+    <li>
+      {{#link-to tab.route group title=tab.message class=tab.name}}
+        {{#if tab.icon}}{{d-icon tab.icon}}{{/if}}
+        {{tab.message}}
+        {{#if tab.count}}<span class='count'>({{tab.count}})</span>{{/if}}
+      {{/link-to}}
+    </li>
+  {{/each}}
+{{/mobile-nav}}
diff --git a/app/assets/javascripts/discourse/templates/group.hbs b/app/assets/javascripts/discourse/templates/group.hbs
index 777c0ea5c2f..b6076c69e0c 100644
--- a/app/assets/javascripts/discourse/templates/group.hbs
+++ b/app/assets/javascripts/discourse/templates/group.hbs
@@ -21,7 +21,7 @@
     </div>
 
     {{#if model.bio_cooked}}
-      <hr/>
+      <hr>
 
       <div class='group-bio'>
         <p>{{{model.bio_cooked}}}</p>
@@ -31,17 +31,7 @@
 
   <div class="list-controls">
     <div class="container">
-      {{#mobile-nav class='group-nav' desktopClass="nav nav-pills" currentPath=application.currentPath}}
-        {{#each getTabs as |tab|}}
-          <li>
-            {{#link-to tab.location model title=tab.message class=tab.name}}
-              {{#if tab.icon}}{{d-icon tab.icon}}{{/if}}
-              {{tab.message}}
-              {{#if tab.count}}<span class='count'>({{tab.count}})</span>{{/if}}
-            {{/link-to}}
-          </li>
-        {{/each}}
-      {{/mobile-nav}}
+      {{group-navigation group=model currentPath=application.currentPath tabs=tabs}}
 
       {{#if displayGroupMessageButton}}
         {{d-button