diff --git a/src/Umbraco.Web.UI.Client/src/navigation.controller.js b/src/Umbraco.Web.UI.Client/src/navigation.controller.js
index b585d22e9f..194c45afe6 100644
--- a/src/Umbraco.Web.UI.Client/src/navigation.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/navigation.controller.js
@@ -510,6 +510,14 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar
         if (!event) {
             return;
         }
+        closeTree();
+    };
+
+    $scope.onOutsideClick = function() {
+        closeTree();
+    };
+
+    function closeTree() {
         if (!appState.getGlobalState("touchDevice")) {
             treeActive = false;
             $timeout(function () {
@@ -518,7 +526,7 @@ function NavigationController($scope, $rootScope, $location, $log, $q, $routePar
                 }
             }, 300);
         }
-    };
+    }
 
     $scope.toggleLanguageSelector = function () {
         $scope.page.languageSelectorIsOpen = !$scope.page.languageSelectorIsOpen;
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
index 0aab35ca21..c133d5d38b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
@@ -1,4 +1,4 @@
-<div id="leftcolumn" ng-controller="Umbraco.NavigationController" ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)">
+<div id="leftcolumn" ng-controller="Umbraco.NavigationController" ng-mouseleave="leaveTree($event)" ng-mouseenter="enterTree($event)" on-outside-click="onOutsideClick()">
 
     <!-- navigation container -->
     <div id="navigation" ng-show="showNavigation" class="fill umb-modalcolumn" ng-animate="'slide'" nav-resize