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.