<div class="ink-dropdown"> <button class="ink-button toggle" data-target="#dropdown">Dropdown <span class="icon-caret-down"></span></button> <ul id="dropdown" class="dropdown-menu"> <li class="heading">Heading</li> <li class="separator-above"><a href="#">Option</a></li> <li><a href="#">Option</a></li> <li class="separator-above disabled"><a href="#">Disabled option</a></li> <li class="submenu"> <a href="#" class="toggle" data-target="#submenu1">A longer option name</a> <ul id="submenu1" class="dropdown-menu"> <li class="submenu"> <a href="#" class="toggle" data-target="#ultrasubmenu">Sub option</a> <ul id="ultrasubmenu" class="dropdown-menu"> <li><a href="#">Sub option</a></li> <li><a href="#" data-target="ultrasubmenu">Sub option</a></li> <li><a href="#">Sub option</a></li> </ul> </li> <li><a href="#">Sub option</a></li> <li><a href="#">Sub option</a></li> </ul> </li> <li><a href="#">Option</a></li> </ul> </div> <script> Ink.requireModules(['Ink.Util.Array_1','Ink.UI.Toggle_1'], function(InkArray, Toggle) { InkArray.each(Ink.ss('.toggle'),function(item){ new Toggle(item); }); }); </script>