diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
index 47e2b90170..618bdb19a9 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditorcontentheader.directive.js
@@ -35,6 +35,7 @@
             });
             scope.vm = {};
             scope.vm.hasVariants = false;
+            scope.vm.hasSubVariants = false;
             scope.vm.hasCulture = false;
             scope.vm.hasSegments = false;
             scope.vm.dropdownOpen = false;
@@ -82,6 +83,7 @@
                 });
 
                 scope.vm.hasVariants = (scope.vm.hasCulture || scope.vm.hasSegments);
+                scope.vm.hasSubVariants = (scope.vm.hasCulture && scope.vm.hasSegments);
                 
                 checkErrorsOnOtherVariants();
 
@@ -90,6 +92,7 @@
                     angular.forEach(scope.content.variants, (v) => {
                         if (v.language !== null && v.segment === null) {
                             var variantMenuEntry = {
+                                key: String.CreateGuid(),
                                 open: v.language && v.language.culture === scope.editor.culture,
                                 variant: v,
                                 subVariants: scope.content.variants.filter( (subVariant) => subVariant.language.culture === v.language.culture && subVariant.segment !== null)
@@ -100,6 +103,7 @@
                 } else {
                     angular.forEach(scope.content.variants, (v) => {
                         scope.vm.variantMenu.push({
+                            key: String.CreateGuid(),
                             variant: v
                         });
                     });
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
index 51a942c245..3809379f1b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/umb-editor-content-header.html
@@ -49,9 +49,9 @@
                         <span ng-bind="editor.content.displayName"></span>
                     </span>
 
-                    <umb-dropdown ng-if="vm.dropdownOpen" class="umb-variant-switcher" ng-class="{'--has-sub-variants': vm.hasSegments === true}" on-close="vm.dropdownOpen = false" umb-keyboard-list>
+                    <umb-dropdown ng-if="vm.dropdownOpen" class="umb-variant-switcher" ng-class="{'--has-sub-variants': vm.hasSubVariants === true}" on-close="vm.dropdownOpen = false" umb-keyboard-list>
                         <umb-dropdown-item
-                            ng-repeat-start="entry in vm.variantMenu track by $index"
+                            ng-repeat-start="entry in vm.variantMenu track by entry.key"
                             class="umb-variant-switcher__item"
                             ng-class="{'--current': entry.variant === editor.content, '--active': entry.variant.active && vm.dropdownOpen, '--error': variantHasError(entry.variant), '--state-notCreated':entry.variant.state==='NotCreated' && entry.variant.name == null, '--state-draft':entry.variant.state==='Draft' || (entry.variant.state==='NotCreated' && entry.variant.name != null)}"
                         >