Warning: Support is incomplete for multi-level dropdowns and dropdowns nested in dialogs.
Note: Add an empty (e.g. void(0)) click handler in order for iOS Safari to work.
<div class="zo-btnGroup zo-dropdown" id="dropdown">
<a href="#" class="zo-btn zo-btn--primary zo--radius zo-btnGroup__btn zo-dropdown__toggle" data-zo-toggle="#dropdown">
Dropdown
<span class="zo-btn__splitter"></span>
<span class="zo-triangle zo-triangle--down"></span>
</a>
<div class="zo-dropdown__overlay" data-zo-close="#dropdown" onclick="void(0)"></div>
<div class="zo-dropdown__content">
<ul class="zo-dropdown__menu zo--radius">
<li class="zo-dropdown__menu__item">
<a href="#" class="zo-dropdown__menu__link">Link</a>
</li>
<li class="zo-dropdown__menu__item">
<a href="#" class="zo-dropdown__menu__link">Link</a>
</li>
</ul>
</div>
</div>
Dropdowns can also be nested in navbars.
<div class="zo-navbar zo-navbar--dark">
<div class="zo-container">
<a href="#" class="zo-navbar__link zo-navbar__toggle zo-navbar__link--bgDark" role="button" data-zo-navbar="#dropdownNav"></a>
<h2 class="zo-navbar__brand">
<a href="/zoaui/" class="zo-navbar__link zo-navbar__brand__link zo-navbar__link--bgDark">ZoaUI</a>
</h2>
<div class="zo-navbar__nav zo-navbar__nav--bgDark" id="dropdownNav">
<ul class="zo-navbar__list">
<li class="zo-navbar__item">
<a href="/zoaui/css/" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark">CSS</a>
</li>
<li class="zo-navbar__item zo-dropdown" id="navDropdown">
<a href="#" class="zo-navbar__link zo-navbar__nav__link zo-navbar__link--bgDark" data-zo-toggle="#navDropdown">
Dropdown
<span class="zo-triangle zo-triangle--down"></span>
</a>
<div class="zo-dropdown__overlay" data-zo-close="#navDropdown" onclick="void(0)"></div>
<div class="zo-dropdown__content">
<ul class="zo-dropdown__menu">
<li class="zo-dropdown__menu__item">
<a href="#" class="zo-dropdown__menu__link">Hyperlink</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>