Like others have mentioned, the Mobile Menu isn't editable, and the solutions listed elsewhere tend to be somewhat outdated (GetDiscoveryTools()
is no longer present in MinervaSkin.php).
So I made a simple Mobile.js script that did the trick for me. I thought I'd share it in case it helps others.
Here's what the custom links look like — there's a dropdown and a regular version that you can customize. To customize the icon, use the icon classes listed below.
Here's the code I added to Mobile.js:
/* Add to MediaWiki:Mobile.js for custom Mobile Menu links for MW-1.34.2 with MobileFrontend and MinervaNeue Just replace span text and href to add links */ var timer = setInterval(function() { if ($('.menu ul:first').length) { console.log("mobile menu exists"); clearInterval(timer); $('.menu ul:first').after( '<ul class="level1"> \ <li> \ <a href="#" \ class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \ <span>Dropdown Links</span> \ </a> \ </li> \ <ul class ="level2"> \ <li> \ <a href="/wiki/Link_1" \ class="mw-ui-icon mw-ui-icon-before"> \ <span>Link 1</span> \ </a> \ </li> \ <li> \ <a href="/wiki/Link_2" \ class="mw-ui-icon mw-ui-icon-before"> \ <span>Link 2</span> \ </a> \ </li> \ <li> \ <a href="/wiki/Link_3" \ class="mw-ui-icon mw-ui-icon-before"> \ <span>Link 3</span> \ </a> \ </li> \ </ul> \ </ul> \ <ul> \ <li> \ <a href="/wiki/Second_Link" \ class="mw-ui-icon mw-ui-icon-before mw-ui-icon-minerva-watchlist"> \ <span>Second Link</span> \ </a> \ </li> \ </ul>' ); $(".menu").find(".level2").hide(); // hide level2 until level1 is clicked $(".level1").click(function(event){ $(this).find(".level2").slideToggle(500); }); // if level1 is clicked, dropdown level2 } }, 100); // check every 100ms
Tested on:
MediaWiki 1.34.2 and 1.35.0
MinervaNeue (d0be74a) 06:41, 1 October 2019
MobileFrontend 2.1.0 (383273b) 11:42, 7 January 2020
P.S. Apparently folks are working on an official solution for this using mw.util.addPortletLink
(see phab:T65459, phab:T231925 and phab:T240910), but it still has some styling issues and I wasn't able to figure out how to implement it for the Mobile Menu. If you know how implement AddPortletLink
for this, please do share!
_________________________________________________________________________
Update 11/19/20:
To customize the MobileMenu Icons, below is a compiled list of Icon classes found by @Lady G2016, @Ianbirtwistle, and myself. If you find more, feel free to share them in this thread.
Here's a list of known icons by version.
To add them, simply add the icon class in place of "mw-ui-icon-minerva-watchlist"
MW-1.34.2 Icon classes
- Dice: mw-ui-icon-minerva-random
- Home: mw-ui-icon-minerva-home
- Settings: mw-ui-icon-minerva-settings
- Speech Bubbles: mw-ui-icon-minerva-userContributions
- Watchlist: mw-ui-icon-minerva-watchlist
MW-1.35 Icon classes
- Bell: mw-ui-icon-wikimedia-bellOutline-base20
- Dice: mw-ui-icon-minerva-die
- Download: mw-ui-icon-minerva-download
- Expand: mw-ui-icon-mf-expand
- Edit: mw-ui-icon-wikimedia-edit-base20
- Edit lock: mw-ui-icon-wikimedia-editLock-base20
- History: mw-ui-icon-wikimedia-history-base20
- Home: mw-ui-icon-minerva-home
- Language: mw-ui-icon-wikimedia-language-base20
- Map pin: mw-ui-icon-minerva-mapPin
- Search: mw-ui-icon-wikimedia-search-base20
- Settings: mw-ui-icon-minerva-settings
- Speech Bubbles: mw-ui-icon-minerva-speechBubbles
- Star: mw-ui-icon-wikimedia-star-base20
- Star (solid blue): mw-ui-icon-wikimedia-unStar-progressive
- Watchlist: mw-ui-icon-minerva-unStar