diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php
index 1ebec5f0f..04cf07164 100644
--- a/includes/VectorTemplate.php
+++ b/includes/VectorTemplate.php
@@ -461,7 +461,7 @@ class VectorTemplate extends BaseTemplate {
 	) : array {
 		$class = ( count( $urls ) == 0 ) ? 'emptyPortlet' : '';
 		$extraClasses = [
-			self::MENU_TYPE_DROPDOWN => 'vectorMenu',
+			self::MENU_TYPE_DROPDOWN => 'vectorMenu-dropdown vectorMenu',
 			self::MENU_TYPE_TABS => 'vectorMenu-tabs vectorTabs',
 			self::MENU_TYPE_DEFAULT => 'vectorMenu-default',
 		];
@@ -475,6 +475,7 @@ class VectorTemplate extends BaseTemplate {
 			'label' => $this->msg( self::MENU_LABEL_KEYS[ $label ] ?? $label )->text(),
 			'html-userlangattributes' => $this->get( 'userlangattributes', '' ),
 			'html-items' => '',
+			'is-dropdown' => self::MENU_TYPE_DROPDOWN === $type,
 		];
 
 		foreach ( $urls as $key => $item ) {
diff --git a/includes/templates/Menu.mustache b/includes/templates/Menu.mustache
index 7bdaabfc0..05f2b6af9 100644
--- a/includes/templates/Menu.mustache
+++ b/includes/templates/Menu.mustache
@@ -1,10 +1,17 @@
 {{!
-	@see MenuDefinition
+	See @typedef MenuDefinition
 }}
-
 <div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
+	{{#is-dropdown}}
+	<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
+	<h3 id="{{label-id}}">
+		<span>{{label}}</span>
+	</h3>
+	{{/is-dropdown}}
+	{{^is-dropdown}}
 	<h3 id="{{label-id}}">{{label}}</h3>
-	<ul {{{html-userlangattributes}}}>
+	{{/is-dropdown}}
+	<ul class="menu" {{{html-userlangattributes}}}>
 		{{{html-items}}}
 	</ul>
 </div>
diff --git a/includes/templates/VectorMenu.mustache b/includes/templates/VectorMenu.mustache
deleted file mode 100644
index 8b7a8b665..000000000
--- a/includes/templates/VectorMenu.mustache
+++ /dev/null
@@ -1,12 +0,0 @@
-{{!
-	See @typedef MenuDefinition
-}}
-<div id="{{id}}" role="navigation" class="{{class}}" aria-labelledby="{{label-id}}">
-	<input type="checkbox" class="vectorMenuCheckbox" aria-labelledby="{{label-id}}" />
-	<h3 id="{{label-id}}">
-		<span>{{label}}</span>
-	</h3>
-	<ul class="menu" {{{html-userlangattributes}}}>
-		{{{html-items}}}
-	</ul>
-</div>
diff --git a/includes/templates/index.mustache b/includes/templates/index.mustache
index bfd91d55c..1368458b5 100644
--- a/includes/templates/index.mustache
+++ b/includes/templates/index.mustache
@@ -25,9 +25,9 @@
 	LogoOptions data-logos
 	MenuDefinition data-personal-menu
 	MenuDefinition data-namespace-tabs
-	object data-variants. See VectorMenu.mustache for documentation.
+	MenuDefinition data-variants
 	MenuDefinition data-page-actions
-	object data-page-actions-more. See VectorMenu.mustache for documentation.
+	MenuDefinition data-page-actions-more
 	object data-search-box. See SearchBox.mustache for documentation.
 	object data-sidebar. See Sidebar.mustache for documentation.
 	object data-footer for footer template partial. see Footer.mustache for documentation.
@@ -80,11 +80,11 @@
 		{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
 		<div id="left-navigation">
 			{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
-			{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
+			{{#data-variants}}{{>Menu}}{{/data-variants}}
 		</div>
 		<div id="right-navigation">
 			{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
-			{{#data-page-actions-more}}{{>VectorMenu}}{{/data-page-actions-more}}
+			{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
 			{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
 		</div>
 	</div>
diff --git a/includes/templates/legacy.mustache b/includes/templates/legacy.mustache
index 5e13f0938..d10a9a388 100644
--- a/includes/templates/legacy.mustache
+++ b/includes/templates/legacy.mustache
@@ -24,9 +24,9 @@
 		usually hidden to screen readers
 	MenuDefinition data-personal-menu
 	MenuDefinition data-namespace-tabs
-	object data-variants. See VectorMenu.mustache for documentation.
+	MenuDefinition data-variants
 	MenuDefinition data-page-actions
-	object data-page-actions-more. See VectorMenu.mustache for documentation.
+	MenuDefinition data-page-actions-more
 	object data-search-box. See SearchBox.mustache for documentation.
 	object data-sidebar. See Sidebar.mustache for documentation.
 	object data-footer for footer template partial. see Footer.mustache for documentation.
@@ -73,11 +73,11 @@
 		{{#data-personal-menu}}{{>Menu}}{{/data-personal-menu}}
 		<div id="left-navigation">
 			{{#data-namespace-tabs}}{{>Menu}}{{/data-namespace-tabs}}
-			{{#data-variants}}{{>VectorMenu}}{{/data-variants}}
+			{{#data-variants}}{{>Menu}}{{/data-variants}}
 		</div>
 		<div id="right-navigation">
 			{{#data-page-actions}}{{>Menu}}{{/data-page-actions}}
-			{{#data-page-actions-more}}{{>VectorMenu}}{{/data-page-actions-more}}
+			{{#data-page-actions-more}}{{>Menu}}{{/data-page-actions-more}}
 			{{#data-search-box}}{{>SearchBox}}{{/data-search-box}}
 		</div>
 	</div>
diff --git a/resources/skins.vector.styles/VectorMenu.less b/resources/skins.vector.styles/MenuDropdown.less
similarity index 98%
rename from resources/skins.vector.styles/VectorMenu.less
rename to resources/skins.vector.styles/MenuDropdown.less
index cd4228184..41f2d976c 100644
--- a/resources/skins.vector.styles/VectorMenu.less
+++ b/resources/skins.vector.styles/MenuDropdown.less
@@ -2,7 +2,9 @@
 @import 'mediawiki.mixins.less';
 
 /* Variants and Actions */
-.vectorMenu {
+// FIXME: For cached HTML
+.vectorMenu,
+.vectorMenu-dropdown {
 	direction: ltr;
 	float: left;
 	cursor: pointer;
diff --git a/resources/skins.vector.styles/index.less b/resources/skins.vector.styles/index.less
index 481bf3eba..852a4cdd8 100644
--- a/resources/skins.vector.styles/index.less
+++ b/resources/skins.vector.styles/index.less
@@ -10,7 +10,7 @@
 	@import 'SearchBox.less';
 	@import 'MenuTabs.less';
 	@import 'watchstar.less';
-	@import 'VectorMenu.less';
+	@import 'MenuDropdown.less';
 	@import 'Portal.less';
 	@import 'Sidebar.less';
 	@import 'SidebarLogo.less';
diff --git a/resources/skins.vector.styles/legacy.less b/resources/skins.vector.styles/legacy.less
index 6fe49dd1b..5acf7673a 100644
--- a/resources/skins.vector.styles/legacy.less
+++ b/resources/skins.vector.styles/legacy.less
@@ -8,7 +8,7 @@
 	@import 'SearchBox.less';
 	@import 'MenuTabs.less';
 	@import 'watchstar.less';
-	@import 'VectorMenu.less';
+	@import 'MenuDropdown.less';
 	@import 'Portal.less';
 	@import 'Sidebar.less';
 	@import 'SidebarLogo.less';
diff --git a/stories/VectorMenu.stories.data.js b/stories/MenuDropdown.stories.data.js
similarity index 94%
rename from stories/VectorMenu.stories.data.js
rename to stories/MenuDropdown.stories.data.js
index 5ffcd9721..0abe5b7a9 100644
--- a/stories/VectorMenu.stories.data.js
+++ b/stories/MenuDropdown.stories.data.js
@@ -1,4 +1,4 @@
-import vectorMenuTemplate from '!!raw-loader!../includes/templates/VectorMenu.mustache';
+import vectorMenuTemplate from '!!raw-loader!../includes/templates/Menu.mustache';
 import { htmluserlangattributes } from './utils';
 
 export { vectorMenuTemplate };
@@ -7,7 +7,8 @@ export { vectorMenuTemplate };
  * @type {MenuDefinition}
  */
 export const moreData = {
-	class: 'vectorMenu',
+	'is-dropdown': true,
+	class: 'vectorMenu-dropdown vectorMenu',
 	label: 'More',
 	id: 'p-cactions',
 	'label-id': 'p-cactions-label',
@@ -30,7 +31,8 @@ export const moreData = {
  * @type {MenuDefinition}
  */
 export const variantsData = {
-	class: 'vectorMenu',
+	'is-dropdown': true,
+	class: 'vectorMenu-dropdown vectorMenu',
 	label: '新加坡简体',
 	id: 'p-variants',
 	'label-id': 'p-variants-label',
diff --git a/stories/VectorMenu.stories.js b/stories/MenuDropdown.stories.js
similarity index 64%
rename from stories/VectorMenu.stories.js
rename to stories/MenuDropdown.stories.js
index 9d73f1e96..cb3d43f29 100644
--- a/stories/VectorMenu.stories.js
+++ b/stories/MenuDropdown.stories.js
@@ -1,7 +1,7 @@
 import mustache from 'mustache';
-import '../resources/skins.vector.styles/VectorMenu.less';
+import '../resources/skins.vector.styles/MenuDropdown.less';
 import '../.storybook/common.less';
-import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
+import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
 
 export default {
 	title: 'MenuDropdown'
diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js
index 5531c196c..45b2c5c94 100644
--- a/stories/skin.stories.data.js
+++ b/stories/skin.stories.data.js
@@ -3,7 +3,7 @@ import { placeholder } from './utils';
 
 import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
 import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
-import { vectorMenuTemplate, moreData, variantsData } from './VectorMenu.stories.data';
+import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
 import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
 import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, sidebarTemplate } from './Sidebar.stories.data';
 import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
diff --git a/tests/phpunit/integration/VectorTemplateTest.php b/tests/phpunit/integration/VectorTemplateTest.php
index a5a10d056..88a0b1609 100644
--- a/tests/phpunit/integration/VectorTemplateTest.php
+++ b/tests/phpunit/integration/VectorTemplateTest.php
@@ -160,6 +160,7 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 			'html-userlangattributes' => $langAttrs,
 			'html-items' => '',
 			'class' => 'emptyPortlet vectorMenu-tabs vectorTabs',
+			'is-dropdown' => false,
 		] );
 
 		$variants = $props['data-variants'];
@@ -167,9 +168,9 @@ class VectorTemplateTest extends MediaWikiIntegrationTestCase {
 		$this->assertSame( $namespaces['class'],
 			'emptyPortlet vectorMenu-tabs vectorTabs' );
 		$this->assertSame( $variants['class'],
-			'emptyPortlet vectorMenu' );
+			'emptyPortlet vectorMenu-dropdown vectorMenu' );
 		$this->assertSame( $actions['class'],
-			'emptyPortlet vectorMenu' );
+			'emptyPortlet vectorMenu-dropdown vectorMenu' );
 		$this->assertSame( $props['data-personal-menu']['class'],
 			'emptyPortlet vectorMenu-default' );
 	}