diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index e789486c4..5b1d76767 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -753,10 +753,10 @@ abstract class SkinVector extends SkinMustache {
 		int $type = self::MENU_TYPE_DEFAULT
 	) {
 		$extraClasses = [
-			self::MENU_TYPE_DROPDOWN => 'vector-menu vector-menu-dropdown',
-			self::MENU_TYPE_TABS => 'vector-menu vector-menu-tabs',
-			self::MENU_TYPE_PORTAL => 'vector-menu vector-menu-portal portal',
-			self::MENU_TYPE_DEFAULT => 'vector-menu',
+			self::MENU_TYPE_DROPDOWN => 'vector-menu-dropdown',
+			self::MENU_TYPE_TABS => 'vector-menu-tabs',
+			self::MENU_TYPE_PORTAL => 'vector-menu-portal portal',
+			self::MENU_TYPE_DEFAULT => '',
 		];
 		if ( $this->isLegacy() ) {
 			$extraClasses[self::MENU_TYPE_TABS] .= ' vector-menu-tabs-legacy';
diff --git a/includes/templates/LegacyMenu.mustache b/includes/templates/LegacyMenu.mustache
index c6d714213..5d7edd089 100644
--- a/includes/templates/LegacyMenu.mustache
+++ b/includes/templates/LegacyMenu.mustache
@@ -3,14 +3,14 @@
 }}
 {{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
 
-<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
+<nav id="{{id}}" class="vector-menu{{#class}} {{.}}{{/class}}" aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
 	{{#is-dropdown}}
 	<input type="checkbox"
 		id="{{id}}-checkbox"
 		role="button"
 		aria-haspopup="true"
 		data-event-name="ui.dropdown-{{id}}"
-		class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
+		class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
 		aria-labelledby="{{id}}-label"
 	/>
 	<label
diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index 8ab35c44b..773e9c4a1 100644
--- a/includes/templates/Menu.mustache
+++ b/includes/templates/Menu.mustache
@@ -2,7 +2,7 @@
 	See @typedef MenuDefinition
 }}
 
-<div id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-user-language-attributes}}}>
+<div id="{{id}}" class="vector-menu{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-user-language-attributes}}}>
 	{{!
 		Dropdown menus use the checkbox hack and require `input` and `label` elements.
 		`aria-label` is applied to the `input` which is semantically a button.
@@ -14,7 +14,7 @@
 		role="button"
 		aria-haspopup="true"
 		data-event-name="ui.dropdown-{{id}}"
-		class="{{#checkbox-class}}{{.}} {{/checkbox-class}}vector-menu-checkbox"
+		class="vector-menu-checkbox{{#checkbox-class}} {{.}}{{/checkbox-class}}"
 		{{#aria-label}}aria-label="{{.}}"{{/aria-label}}
 	/>
 	<label
diff --git a/stories/UserLinks.stories.data.js b/stories/UserLinks.stories.data.js
index 4d3f1c83d..50858c1be 100644
--- a/stories/UserLinks.stories.data.js
+++ b/stories/UserLinks.stories.data.js
@@ -72,7 +72,7 @@ const LOGGED_OUT_ITEMS = `
 `;
 
 const additionalUserMoreData = {
-	class: 'vector-menu vector-user-menu-more',
+	class: 'vector-user-menu-more',
 	'heading-class': '',
 	'is-dropdown': false
 };
diff --git a/stories/utils.js b/stories/utils.js
index fba0e3241..9299e353b 100644
--- a/stories/utils.js
+++ b/stories/utils.js
@@ -60,7 +60,7 @@ function helperMakeMenuData( name, htmlItems, additionalData = {} ) {
 
 	return Object.assign( {
 		id: `p-${name}`,
-		class: `mw-portlet mw-portlet-${name} vector-menu ${additionalClassString}`,
+		class: `mw-portlet mw-portlet-${name} ${additionalClassString}`,
 		label,
 		'html-user-language-attributes': htmlUserLanguageAttributes,
 		'html-items': htmlItems
diff --git a/tests/jest/__snapshots__/userLinks.test.js.snap b/tests/jest/__snapshots__/userLinks.test.js.snap
index b8b0926eb..bb449b4bf 100644
--- a/tests/jest/__snapshots__/userLinks.test.js.snap
+++ b/tests/jest/__snapshots__/userLinks.test.js.snap
@@ -3,7 +3,7 @@
 exports[`UserLinks renders 1`] = `
 "<nav class=\\"vector-user-links\\" aria-label=\\"\\" role=\\"navigation\\">
 
-<div id=\\"p-personal-more\\" class=\\"mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more\\">
+<div id=\\"p-personal-more\\" class=\\"vector-menu mw-portlet mw-portlet-personal-more vector-user-menu-more\\">
 	<div class=\\"vector-menu-content\\">
 		
 		<ul class=\\"vector-menu-content-list\\">
@@ -16,7 +16,7 @@ exports[`UserLinks renders 1`] = `
 	</div>
 </div>
 
-<div id=\\"p-personal\\" class=\\"mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu vector-menu-dropdown\\">
+<div id=\\"p-personal\\" class=\\"vector-menu mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu-dropdown\\">
 	<div class=\\"vector-menu-content\\">
 		
 		<ul class=\\"vector-menu-content-list\\">
diff --git a/tests/jest/userLinksData.js b/tests/jest/userLinksData.js
index 99efe2da4..cc482e324 100644
--- a/tests/jest/userLinksData.js
+++ b/tests/jest/userLinksData.js
@@ -7,7 +7,7 @@ const templateData = {
 	'is-wide': false,
 	'data-user-more': {
 		id: 'p-personal-more',
-		class: 'mw-portlet mw-portlet-personal-more vector-menu vector-user-menu-more',
+		class: 'mw-portlet mw-portlet-personal-more vector-user-menu-more',
 		label: 'Toggle sidebar',
 		'html-items': `
 			<li id="ca-uls" class="user-links-collapsible-item mw-list-item active"><a href="#" class="uls-trigger mw-ui-button mw-ui-quiet"><span class="mw-ui-icon mw-ui-icon-wikimedia-language"></span> <span>English</span></a></li>
@@ -18,7 +18,7 @@ const templateData = {
 	},
 	'data-user-menu': {
 		id: 'p-personal',
-		class: 'mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu vector-menu-dropdown',
+		class: 'mw-portlet mw-portlet-personal vector-user-menu vector-user-menu-logged-in vector-menu-dropdown',
 		label: 'Personal tools',
 		'html-items': `
 			<li id="pt-userpage" class="user-links-collapsible-item mw-list-item"><a class="mw-ui-icon mw-ui-icon-before mw-ui-icon-userAvatar mw-ui-icon-wikimedia-userAvatar" href="/wiki/User:Admin" title="Your user page [.]" accesskey="."><span>Admin</span></a></li>
diff --git a/tests/phpunit/integration/SkinVectorTest.php b/tests/phpunit/integration/SkinVectorTest.php
index 5e8a881cf..febea6111 100644
--- a/tests/phpunit/integration/SkinVectorTest.php
+++ b/tests/phpunit/integration/SkinVectorTest.php
@@ -256,7 +256,7 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 				// Provided by core
 				'id' => 'p-views',
 				'class' => 'mw-portlet mw-portlet-views emptyPortlet ' .
-					'vector-menu vector-menu-tabs vector-menu-tabs-legacy',
+					'vector-menu-tabs vector-menu-tabs-legacy',
 				'html-tooltip' => '',
 				'html-items' => '',
 				'html-after-portal' => '',
@@ -271,19 +271,19 @@ class SkinVectorTest extends MediaWikiIntegrationTestCase {
 		$variants = $props['data-variants'];
 		$actions = $props['data-actions'];
 		$this->assertSame(
-			'mw-portlet mw-portlet-namespaces vector-menu vector-menu-tabs vector-menu-tabs-legacy',
+			'mw-portlet mw-portlet-namespaces vector-menu-tabs vector-menu-tabs-legacy',
 			$namespaces['class']
 		);
 		$this->assertSame(
-			'mw-portlet mw-portlet-variants vector-menu-dropdown-noicon vector-menu vector-menu-dropdown',
+			'mw-portlet mw-portlet-variants vector-menu-dropdown-noicon vector-menu-dropdown',
 			$variants['class']
 		);
 		$this->assertSame(
-			'mw-portlet mw-portlet-cactions vector-menu-dropdown-noicon vector-menu vector-menu-dropdown',
+			'mw-portlet mw-portlet-cactions vector-menu-dropdown-noicon vector-menu-dropdown',
 			$actions['class']
 		);
 		$this->assertSame(
-			'mw-portlet mw-portlet-personal vector-user-menu-legacy vector-menu',
+			'mw-portlet mw-portlet-personal vector-user-menu-legacy',
 			$props['data-personal']['class']
 		);
 	}