diff --git a/twinkle.css b/twinkle.css
index e27c74634..948da5893 100644
--- a/twinkle.css
+++ b/twinkle.css
@@ -2,7 +2,7 @@
  * Explicitly set width of TW menu so that we can use a hidden peer gadget
  * to add space where the TW menu would go before it loads.
  */
-.skin-vector #p-twinkle {
+.skin-vector .vector-menu-dropdown #p-twinkle {
 	width: 3.24em;
 }
 
diff --git a/twinkle.js b/twinkle.js
index 694ff4e71..be8f219d9 100644
--- a/twinkle.js
+++ b/twinkle.js
@@ -216,14 +216,15 @@ Twinkle.getPref = function twinkleGetPref(name) {
  * portlet menu types all work slightly different.
  *
  * Available navigation areas depend on the skin used.
+ * Vector:
+ *  For each option, the outer div class contains "vector-menu", the inner div class is "vector-menu-content", and the ul is "vector-menu-content-list"
+ *  "mw-panel", outer div class contains "vector-menu-portal". Existing portlets/elements: "p-logo", "p-navigation", "p-interaction", "p-tb", "p-coll-print_export"
+ *  "left-navigation", outer div class contains "vector-menu-tabs" or "vector-menu-dropdown". Existing portlets: "p-namespaces", "p-variants" (menu)
+ *  "right-navigation", outer div class contains "vector-menu-tabs" or "vector-menu-dropdown". Existing portlets: "p-views", "p-cactions" (menu), "p-search"
+ *  Special layout of p-personal portlet (part of "head") through specialized styles.
  * Monobook:
  *  "column-one", outer div class "portlet", inner div class "pBody". Existing portlets: "p-cactions", "p-personal", "p-logo", "p-navigation", "p-search", "p-interaction", "p-tb", "p-coll-print_export"
  *  Special layout of p-cactions and p-personal through specialized styles.
- * Vector:
- *  "mw-panel", outer div class "portal", inner div class "body". Existing portlets/elements: "p-logo", "p-navigation", "p-interaction", "p-tb", "p-coll-print_export"
- *  "left-navigation", outer div class "vectorTabs" or "vectorMenu", inner div class "" or "menu". Existing portlets: "p-namespaces", "p-variants" (menu)
- *  "right-navigation", outer div class "vectorTabs" or "vectorMenu", inner div class "" or "menu". Existing portlets: "p-views", "p-cactions" (menu), "p-search"
- *  Special layout of p-personal portlet (part of "head") through specialized styles.
  * Modern:
  *  "mw_contentwrapper" (top nav), outer div class "portlet", inner div class "pBody". Existing portlets or elements: "p-cactions", "mw_content"
  *  "mw_portlets" (sidebar), outer div class "portlet", inner div class "pBody". Existing portlets: "p-navigation", "p-search", "p-interaction", "p-tb", "p-coll-print_export"
@@ -268,7 +269,8 @@ Twinkle.addPortlet = function(navigation, id, text, type, nextnodeid) {
 			if (navigation !== 'portal' && navigation !== 'left-navigation' && navigation !== 'right-navigation') {
 				navigation = 'mw-panel';
 			}
-			outerDivClass = navigation === 'mw-panel' ? 'portal' : type === 'menu' ? 'vectorMenu' : 'vectorTabs';
+			outerDivClass = 'vector-menu vector-menu-' + (navigation === 'mw-panel' ? 'portal' : type === 'menu' ? 'dropdown' : 'tabs');
+			innerDivClass = 'vector-menu-content';
 			break;
 		case 'modern':
 			if (navigation !== 'mw_portlets' && navigation !== 'mw_contentwrapper') {
@@ -289,6 +291,7 @@ Twinkle.addPortlet = function(navigation, id, text, type, nextnodeid) {
 	// Build the DOM elements.
 	var outerDiv = document.createElement('nav');
 	outerDiv.setAttribute('aria-labelledby', id + '-label');
+	// Vector getting vector-menu-empty FIXME TODO
 	outerDiv.className = outerDivClass + ' emptyPortlet';
 	outerDiv.id = id;
 	if (nextnode && nextnode.parentNode === root) {
@@ -297,52 +300,51 @@ Twinkle.addPortlet = function(navigation, id, text, type, nextnodeid) {
 		root.appendChild(outerDiv);
 	}
 
-	var h5 = document.createElement('h3');
-	h5.id = id + '-label';
+	var h3 = document.createElement('h3');
+	h3.id = id + '-label';
 	var ul = document.createElement('ul');
 
-	if (outerDivClass === 'vectorMenu') {
-
+	if (skin === 'vector') {
 		// add invisible checkbox to keep menu open when clicked
 		// similar to the p-cactions ("More") menu
-		var chkbox = document.createElement('input');
-		chkbox.className = 'vectorMenuCheckbox';
-		chkbox.setAttribute('type', 'checkbox');
-		chkbox.setAttribute('aria-labelledby', id + '-label');
-		outerDiv.appendChild(chkbox);
-
-		var span = document.createElement('span');
-		span.appendChild(document.createTextNode(text));
-		h5.appendChild(span);
+		if (outerDivClass.indexOf('vector-menu-dropdown') !== -1) {
+			var chkbox = document.createElement('input');
+			chkbox.className = 'vectorMenuCheckbox vector-menu-checkbox'; // remove vectorMenuCheckbox after 1.35-wmf.37 goes live
+			chkbox.setAttribute('type', 'checkbox');
+			chkbox.setAttribute('aria-labelledby', id + '-label');
+			outerDiv.appendChild(chkbox);
 
-		var a = document.createElement('a');
-		a.href = '#';
+			var span = document.createElement('span');
+			span.appendChild(document.createTextNode(text));
+			h3.appendChild(span);
 
-		$(a).click(function(e) {
-			e.preventDefault();
-		});
+			var a = document.createElement('a');
+			a.href = '#';
 
-		h5.appendChild(a);
-		outerDiv.appendChild(h5);
+			$(a).click(function(e) {
+				e.preventDefault();
+			});
 
-		ul.className = 'menu';
-		outerDiv.appendChild(ul);
+			h3.appendChild(a);
+		}
 
+		outerDiv.appendChild(h3);
+		ul.className = 'menu vector-menu-content-list';  // remove menu after 1.35-wmf.37 goes live
 	} else {
+		h3.appendChild(document.createTextNode(text));
+		outerDiv.appendChild(h3);
+	}
 
-		h5.appendChild(document.createTextNode(text));
-		outerDiv.appendChild(h5);
-		if (innerDivClass) {
-			var innerDiv = document.createElement('div');
-			innerDiv.className = innerDivClass;
-			innerDiv.appendChild(ul);
-			outerDiv.appendChild(innerDiv);
-		} else {
-			outerDiv.appendChild(ul);
-		}
-
+	if (innerDivClass) {
+		var innerDiv = document.createElement('div');
+		innerDiv.className = innerDivClass;
+		innerDiv.appendChild(ul);
+		outerDiv.appendChild(innerDiv);
+	} else {
+		outerDiv.appendChild(ul);
 	}
 
+
 	return outerDiv;
 
 };