Watch this part in video
Drilldowns use the standard Menu syntax, using <ul>, <li>, and <a>. Add data-drilldown to the root menu to set up the drilldown.
To create sub-menus, place a <ul> next to an <a>. Clicking that <a> will then open the <ul> that it’s next to.
Any <a> without a submenu will function like a normal link.
<ul class="vertical menu drilldown" data-drilldown>
<li><a href="#">One</a></li>
<li>
<a href="#">Two</a>
<ul class="menu vertical nested">
<li><a href="#">Two A</a></li>
<li><a href="#">Two B</a></li>
<li><a href="#">Two C</a></li>
<li><a href="#">Two D</a></li>
</ul>
</li>
<li><a href="#">Three</a></li>
<li><a href="#">Four</a></li>
</ul>
The drilldown menu takes on the height of the tallest menu in the hierarchy, so the menu doesn't change height as the user navigates it.
If you like to set the height to auto you can also set the autoHeight and animateHeight params
<ul class="vertical menu drilldown" data-drilldown data-auto-height="true" data-animate-height="true">
<!-- -->
</ul>
<ul class="vertical menu drilldown" data-drilldown data-scroll-top="true">
<!-- -->
</ul>
The drilldown plugin automatically adds a back button to the top of each nested menu. To style this control, target the .js-drilldown-back class:
.js-drilldown-back {
// ...
}