The HTML structure of menus is changing and this will impact various gadgets. For example, dropdowns in Vector e.g. more menu currently apply a `.menu` class. This will soon no longer the case. After the change has applied, a new class `.mw-portlet` will be available. With time this class will be used across skins making gadget development easier.
ACTION REQUIRED: Please review the following user scripts to use `nav ul` instead, or `.vector-menu ul` / `.vector-menu` / `.vector-menu-tabs` if targetting Vector only.
Examples of selectors that will no longer work:
```
#p-cactions > .menu > ul
div.vectorMenu
.vectorTabs
```
## Example
Before HTML:
```
<nav id="p-cactions" class="vector-menu-empty vector-menu vector-menu-dropdown vectorMenu" aria-labelledby="p-cactions-label" role="navigation" style="margin-right: initial;">
<input type="checkbox" class="vector-menu-checkbox vectorMenuCheckbox" aria-labelledby="p-cactions-label">
<h3 id="p-cactions-label">
<span>More</span>
</h3>
<!-- Please do not use the .body class, it is deprecated. -->
<div class="body vector-menu-content">
<!-- Please do not use the .menu class, it is deprecated. -->
<ul class="menu vector-menu-content-list"><li id="ca-purge"><a href="/w/index.php?title=Main_Page&action=purge" title="Purge the server cache of this page [⌃⌥*]" accesskey="*">Purge</a></li></ul>
</div>
</nav>
```
After HTML:
```
<nav id="p-cactions" class="vector-menu-empty vector-menu vector-menu-dropdown" aria-labelledby="p-cactions-label" role="navigation" style="margin-right: initial;">
<input type="checkbox" class="vector-menu-checkbox" aria-labelledby="p-cactions-label">
<h3 id="p-cactions-label">
<span>More</span>
</h3>
<!-- Please do not use the .body class, it is deprecated. -->
<div class="vector-menu-content">
<!-- Please do not use the .menu class, it is deprecated. -->
<ul class="vector-menu-content-list"><li id="ca-purge"><a href="/w/index.php?title=Main_Page&action=purge" title="Purge the server cache of this page [⌃⌥*]" accesskey="*">Purge</a></li></ul>
</div>
</nav>
```
# Compatibility script
JS Gadgets can prepend the following to their code to maintain compatibility as they migrate:
```
$('.vector-menu-tabs').addClass( 'vectorTabs' );
$('.vector-menu-content').addClass('body');
$('.vector-menu-checkbox').addClass('vectorMenuCheckbox');
$('.vector-menu-dropdown').addClass('vectorMenu');
$('.vector-menu-content-list').addClass('menu');
```
Scripts should update their selectors
# Impacted
Only Vector will be impacted by this change.
Suspected to impact < 3000 pages
https://global-search.toolforge.org/?q=%28%5C.vectorMenu%7C%5C.vectorTabs%29®ex=1&namespaces=&title=.*%2F.*%28js%7Ccss%29