diff --git a/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.block.less b/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.block.less
index d53e9174c8..3a1db43548 100644
--- a/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.block.less
+++ b/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.block.less
@@ -2,7 +2,7 @@
 	padding-right: 0px;
 }
 .InventoryManageBreadCrumb-ncy.BreadCrumb-list{
-	padding-left: 5px;
+	padding-left: 0px;
 }
 .InventoryManageBreadCrumbs-separator{
 	content: "/";
@@ -22,4 +22,4 @@
 }
 ol.BreadCrumb-list{
 	display: inline-block;
-}
\ No newline at end of file
+}
diff --git a/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.controller.js b/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.controller.js
index 1f7bbc8cd8..fb6b2f321a 100644
--- a/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.controller.js
+++ b/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.controller.js
@@ -5,23 +5,29 @@
  *************************************************/
 
 export default
-    ['$state', '$stateParams', '$scope', 'inventoryData', 'breadCrumbData', function($state, $stateParams, $scope, inventoryData, breadCrumbData){
+    ['$state', '$stateParams', '$scope', '$rootScope', 'inventoryData', 'breadCrumbData', function($state, $stateParams, $scope, $rootScope, inventoryData, breadCrumbData){
         // process result data into the same order specified in the traversal path
         $scope.groups = _.sortBy(breadCrumbData, function(item){
             var index = _.indexOf($stateParams.group, item.id);
             return (index === -1) ? $stateParams.group.length : index;
         });
         $scope.inventory = inventoryData;
-        $scope.state = $state;
+        $scope.currentState = $state.current.name;
         // slices the group stack at $index to supply new group params to $state.go()
         $scope.goToGroup = function(index){
             var group = $stateParams.group.slice(0, index);
             $state.go('inventoryManage', {group: group}, {reload: true});
         };
-        $scope.isRootState = function(){
-            return $state.current.name === 'inventoryManage';
-        };
         $scope.goToInventory = function(){
             $state.go('inventoryManage', {group: undefined}, {reload: true});
         };
+
+        var cleanUpStateChangeListener = $rootScope.$on('$stateChangeSuccess', function(event, toState){
+            $scope.currentState = toState.name;
+        });
+
+        // Remove the listener when the scope is destroyed to avoid a memory leak
+        $scope.$on('$destroy', function() {
+            cleanUpStateChangeListener();
+        });
     }];
diff --git a/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.partial.html b/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.partial.html
index baa630ac18..d40d9f6aba 100644
--- a/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.partial.html
+++ b/awx/ui/client/src/inventories/manage/breadcrumbs/breadcrumbs.partial.html
@@ -1,25 +1,22 @@
 <div class="BreadCrumb InventoryManageBreadCrumbs">
 	<ol class="BreadCrumb-list">
 		<li class="BreadCrumb-item"><a ui-sref="inventories">Inventories</a></li>
-		<li href class="BreadCrumb-item">
-			<a href ng-if="!isRootState() || groups.length > 0" ng-click="goToInventory()">{{inventory.name}}</a>
-			<span ng-if="isRootState() && groups.length === 0">{{inventory.name}}</span>
+		<li class="BreadCrumb-item">
+			<a href ng-if="currentState !== 'inventoryManage' || groups.length > 0" ng-click="goToInventory()">{{inventory.name}}</a>
+			<span ng-if="currentState === 'inventoryManage' && groups.length === 0">{{inventory.name}}</span>
 		</li>
 		<!-- inside inventoryManage list view (last item is not clickable) -->
-		<span ng-if="isRootState()">
-            <li class="BreadCrumb-item"></li>
-			<li ng-repeat="group in groups | limitTo:(groups.length-1) track by $index" class="BreadCrumb-item">
-				<a href ng-click="goToGroup($index+1)">{{group.name}}</a>
-			</li>
-			<li ng-hide="groups.length == 0" class="BreadCrumb-item"><span>{{groups[groups.length-1].name}}</span></li>
-		</span>
+		<li ng-repeat="group in groups | limitTo:(groups.length-1) track by $index" class="BreadCrumb-item" ng-if="currentState === 'inventoryManage'">
+			<a href ng-click="goToGroup($index+1)">{{group.name}}</a>
+		</li>
+		<li ng-hide="groups.length == 0" class="BreadCrumb-item" ng-if="currentState === 'inventoryManage'">
+			<span>{{groups[groups.length-1].name}}</span>
+		</li>
 		<!-- inside inventoryManage.child like add/edit (last item is clickable)-->
-		<span ng-if="!isRootState()">
-			<li class="BreadCrumb-item"></li>
-			<li ng-repeat="group in groups track by $index" class="BreadCrumb-item">
-				<a href ng-click="goToGroup($index+1)">{{group.name}}</a>
-			</li>
-			<li class="BreadCrumb-item"></li>
+		<li ng-repeat="group in groups track by $index" class="BreadCrumb-item" ng-if="currentState !== 'inventoryManage'">
+			<a href ng-click="goToGroup($index+1)">{{group.name}}</a>
+		</li>
+		<li class="BreadCrumb-item" ng-if="currentState !== 'inventoryManage'"></li>
 		</span>
         <div class="InventoryManageBreadCrumb-ncy" ng-if="!licenseMissing" ncy-breadcrumb></div>
 	</ol>