diff --git a/includes/VectorTemplate.php b/includes/VectorTemplate.php
index 2fe5cf1..0a9383e 100644
--- a/includes/VectorTemplate.php
+++ b/includes/VectorTemplate.php
@@ -263,6 +263,7 @@ class VectorTemplate extends BaseTemplate {
 		$skin = $this->getSkin();
 		$portals = $skin->buildSidebar();
 		$props = [];
+		$languages = null;
 
 		// Render portals
 		foreach ( $portals as $name => $content ) {
@@ -298,7 +299,7 @@ class VectorTemplate extends BaseTemplate {
 					// languages exist or there is a value in html-after-portal
 					// for example to show the add language wikidata link (T252800)
 					if ( count( $content ) || $portal['html-after-portal'] ) {
-						$props[] = $portal;
+						$languages = $portal;
 					}
 					break;
 				default:
@@ -341,6 +342,7 @@ class VectorTemplate extends BaseTemplate {
 			),
 			'array-portals-rest' => array_slice( $props, 1 ),
 			'data-portals-first' => $firstPortal,
+			'data-portals-languages' => $languages,
 			'msg-vector-action-toggle-sidebar' => $this->msg( 'vector-action-toggle-sidebar' )->text(),
 			// [todo] fetch user preference when logged in (T246427).
 			'sidebar-visible' => true
diff --git a/includes/templates/Sidebar.mustache b/includes/templates/Sidebar.mustache
index a348d2e..1fd80e8 100644
--- a/includes/templates/Sidebar.mustache
+++ b/includes/templates/Sidebar.mustache
@@ -35,4 +35,5 @@
 	</div>
 	{{/data-emphasized-sidebar-action}}
 	{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
+	{{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}}
 </div>
diff --git a/includes/templates/legacy/Sidebar.mustache b/includes/templates/legacy/Sidebar.mustache
index e160a48..1e53014 100644
--- a/includes/templates/legacy/Sidebar.mustache
+++ b/includes/templates/legacy/Sidebar.mustache
@@ -1,8 +1,6 @@
 {{!
+	See @typedef SidebarData
 	string html-logo-attributes for site logo. Must be used inside tag e.g. `class="logo" lang="en-gb"`
-	MenuDefinition data-portals-first
-	MenuDefinition[] array-portals-rest
-	@prop boolean has-logo whether to show a logo or not.
 }}
 
 <div id="mw-panel">
@@ -13,4 +11,5 @@
 	{{/has-logo}}
 	{{#data-portals-first}}{{>Menu}}{{/data-portals-first}}
 	{{#array-portals-rest}}{{>Menu}}{{/array-portals-rest}}
+	{{#data-portals-languages}}{{>Menu}}{{/data-portals-languages}}
 </div>
diff --git a/stories/Sidebar.stories.data.js b/stories/Sidebar.stories.data.js
index 7154e43..6862181 100644
--- a/stories/Sidebar.stories.data.js
+++ b/stories/Sidebar.stories.data.js
@@ -1,4 +1,5 @@
 import sidebarTemplate from '!!raw-loader!../includes/templates/Sidebar.mustache';
+import sidebarLegacyTemplate from '!!raw-loader!../includes/templates/legacy/Sidebar.mustache';
 import { vectorMenuTemplate } from './MenuDropdown.stories.data';
 import { PORTALS } from './MenuPortal.stories.data';
 
@@ -6,7 +7,7 @@ const HTML_LOGO_ATTRIBUTES = `class="mw-wiki-logo" href="/wiki/Main_Page" title=
 const SIDEBAR_BEFORE_OUTPUT_HOOKINFO = `Beware: Portals can be added, removed or reordered using
 SidebarBeforeOutput hook as in this example.`;
 
-export { sidebarTemplate };
+export { sidebarTemplate, sidebarLegacyTemplate };
 
 export const SIDEBAR_TEMPLATE_PARTIALS = {
 	Menu: vectorMenuTemplate
@@ -28,9 +29,9 @@ export const SIDEBAR_DATA = {
 		},
 		'array-portals-rest': [
 			PORTALS.toolbox,
-			PORTALS.otherProjects,
-			PORTALS.langlinks
+			PORTALS.otherProjects
 		],
+		'data-portals-languages': PORTALS.langlinks,
 		'html-logo-attributes': HTML_LOGO_ATTRIBUTES
 	},
 	withPortals: {
@@ -38,18 +39,18 @@ export const SIDEBAR_DATA = {
 		'data-portals-first': PORTALS.navigation,
 		'array-portals-rest': [
 			PORTALS.toolbox,
-			PORTALS.otherProjects,
-			PORTALS.langlinks
+			PORTALS.otherProjects
 		],
+		'data-portals-languages': PORTALS.langlinks,
 		'html-logo-attributes': HTML_LOGO_ATTRIBUTES
 	},
 	withoutLogo: {
 		'has-logo': false,
+		'data-portals-languages': PORTALS.langlinks,
 		'array-portals-first': PORTALS.navigation,
 		'array-portals-rest': [
 			PORTALS.toolbox,
-			PORTALS.otherProjects,
-			PORTALS.langlinks
+			PORTALS.otherProjects
 		]
 	},
 	thirdParty: {
diff --git a/stories/Sidebar.stories.js b/stories/Sidebar.stories.js
index 7e88121..a455580 100644
--- a/stories/Sidebar.stories.js
+++ b/stories/Sidebar.stories.js
@@ -3,24 +3,29 @@ import '../.storybook/common.less';
 import '../resources/skins.vector.styles/Sidebar.less';
 import '../resources/skins.vector.styles/SidebarLogo.less';
 import '../resources/skins.vector.styles/MenuPortal.less';
-import { sidebarTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './Sidebar.stories.data';
+import { sidebarTemplate,
+	sidebarLegacyTemplate, SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS } from './Sidebar.stories.data';
 
 export default {
 	title: 'Sidebar'
 };
 
-export const sidebarWithNoPortals = () => mustache.render(
-	sidebarTemplate, SIDEBAR_DATA.withNoPortals, SIDEBAR_TEMPLATE_PARTIALS
+export const sidebarLegacyWithNoPortals = () => mustache.render(
+	sidebarLegacyTemplate, SIDEBAR_DATA.withNoPortals, SIDEBAR_TEMPLATE_PARTIALS
 );
 
-export const sidebarWithoutLogo = () => mustache.render(
+export const sidebarLegacyWithPortals = () => mustache.render(
+	sidebarLegacyTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS
+);
+
+export const sidebarModernWithoutLogo = () => mustache.render(
 	sidebarTemplate, SIDEBAR_DATA.withoutLogo, SIDEBAR_TEMPLATE_PARTIALS
 );
 
-export const sidebarWithPortals = () => mustache.render(
+export const sidebarModernWithPortals = () => mustache.render(
 	sidebarTemplate, SIDEBAR_DATA.withPortals, SIDEBAR_TEMPLATE_PARTIALS
 );
 
-export const sidebarThirdParty = () => mustache.render(
+export const sidebarModernThirdParty = () => mustache.render(
 	sidebarTemplate, SIDEBAR_DATA.thirdParty, SIDEBAR_TEMPLATE_PARTIALS
 );
diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js
index ac66c6e..c7fe793 100644
--- a/stories/skin.stories.data.js
+++ b/stories/skin.stories.data.js
@@ -5,7 +5,8 @@ import { PERSONAL_MENU_TEMPLATE_DATA, menuTemplate } from './Menu.stories.data';
 import { pageActionsData, namespaceTabsData } from './MenuTabs.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 { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS,
+	sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data';
 import { FOOTER_TEMPLATE_DATA, footerTemplate } from './Footer.stories.data';
 import { logoTemplate } from './Logo.stories.data';
 
@@ -45,6 +46,7 @@ export const NAVIGATION_TEMPLATE_DATA = {
 export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
 	Logo: logoTemplate,
 	SearchBox: searchBoxTemplate,
+	'legacy/Sidebar': sidebarLegacyTemplate,
 	Sidebar: sidebarTemplate,
 	VectorMenu: vectorMenuTemplate,
 	Menu: menuTemplate,
diff --git a/stories/types.js b/stories/types.js
index 21758ed..d076816 100644
--- a/stories/types.js
+++ b/stories/types.js
@@ -29,6 +29,14 @@
  * @prop {string} msg-sitesubtitle alternate text for tagline.
  */
 
+/**
+ * @typedef {Object} SidebarData
+ * @prop {MenuDefinition} data-portals-languages
+ * @prop {MenuDefinition} data-portals-first
+ * @prop {MenuDefinition[]} array-portals-rest
+ * @prop {boolean} [has-logo] whether to show a logo or not.
+ */
+
 /**
  * @typedef {Object} SearchData
  * @prop {string|null} msg-search