diff --git a/app/components/gh-nav-menu.js b/app/components/gh-nav-menu.js
index 9ff24a721..458e32f2d 100644
--- a/app/components/gh-nav-menu.js
+++ b/app/components/gh-nav-menu.js
@@ -31,6 +31,11 @@ export default Component.extend({
         return this.get('config.clientExtensions.script') && this.get('session.user.isOwner');
     }),
 
+    isIntegrationRoute: computed('router.currentRouteName', function () {
+        let re = /^settings\.integration/;
+        return re.test(this.router.currentRouteName);
+    }),
+
     // the menu has a rendering issue (#8307) when the the world is reloaded
     // during an import which we have worked around by not binding the icon
     // style directly. However we still need to keep track of changing icons
diff --git a/app/templates/components/gh-nav-menu.hbs b/app/templates/components/gh-nav-menu.hbs
index 5d467af79..e1b27a230 100644
--- a/app/templates/components/gh-nav-menu.hbs
+++ b/app/templates/components/gh-nav-menu.hbs
@@ -64,7 +64,7 @@
             <li>{{#link-to "settings.design" data-test-nav="design"}}{{svg-jar "compass"}}Design{{/link-to}}</li>
             <li>{{#link-to "settings.tags" data-test-nav="tags"}}{{svg-jar "tag"}}Tags{{/link-to}}</li>
             <li>{{#link-to "settings.code-injection" data-test-nav="code-injection"}}{{svg-jar "brackets"}}Code injection{{/link-to}}</li>
-            <li>{{#link-to "settings.integrations" data-test-nav="integrations"}}{{svg-jar "box"}}Integrations{{/link-to}}</li>
+            <li>{{#link-to "settings.integrations" current-when=isIntegrationRoute data-test-nav="integrations"}}{{svg-jar "box"}}Integrations{{/link-to}}</li>
             <li>{{#link-to "settings.labs" data-test-nav="labs"}}{{svg-jar "wrench-double"}}Labs{{/link-to}}</li>
         </ul>
     {{/if}}