Getting to know metismenu...

Cassiopeia's Collapsible Dropdown menu uses Metismenu. As far as I can tell, Metismenu is originally an advanced jQuery plugin developed by Onokumus (there's also a vanilla JS version), which was incorporated into Joomla 4.

I was curious what it looked like, and whether I could customize it to my liking.

It adds quite a lot of divs and classes - some of them familiar, some of them new. It looks like this:

<nav class="navbar navbar-expand-lg">
	<button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbar1"
	        aria-controls="navbar1" aria-expanded="false" aria-label="Toggle Navigation">
		<span class="icon-menu" aria-hidden="true"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbar1">
		<ul class="mod-menu mod-menu_dropdown-metismenu metismenu mod-list">
			<li class="metismenu-item item-101 level-1 default"><a href="/">FIRST</a></li>
			<li class="metismenu-item item-103 level-1"><a href="/second">SECOND</a></li>
			<li class="metismenu-item item-105 level-1 current active deeper parent">
                            <a href="/third" aria-current="page">THIRD with SUBLIST</a>
			    <button class="mm-toggler mm-toggler-link mm-collapsed"
                                    aria-haspopup="true" aria-expanded="false" aria-label="third with sublist"></button>
				<ul class="mm-collapse" style="">
					<li class="metismenu-item item-106 level-2"><a href="/sublist/first">SUB-FIRST</a></li>
					<li class="metismenu-item item-108 level-2"><a href="/sublist/second">SUB-SECOND</a></li>
				</ul>
			</li>
			<li class="metismenu-item item-110 level-1"><a href="/third">THIRD</a></li>
		</ul>
    </div>
</nav>

This menu comes with a number of toggles:

The data-toggle "collapse" (open or close the menu when clicking the hamburger):

  • removes "collapsed" from the button,
  • changes "aria-expanded" from "false" to "true" in the button,
  • adds class "show" to div.navbar-collapse.

The toggler for displaying sub-menu:

  • adds class "mm-active" to the classes for list-item with "deeper.parent"
  • removes class "mm-collapsed" from the button.mm-toggler,
  • adds class "mm-show" to ul.mm-collapse.

By default, the menu uses a FontAwesome icon as hamburger.

For larks, I modified that to a pure CSS hamburger, which changes to an "X" when the menu is open; to do that, I made an override to collapse-metismenu.php, changing the class "icon-menu" to "iconbar". In my CSS, I used the aria attribute (aria-expanded, true or false) to target my iconbar. But I did that when I was still playing around with a test site for J!4, and forgot to save it 😊. So I'll have to re-do that one of these days.