Basis Styleguide.c-navbar
Navbar component
html
<ul class="c-navbar">
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item">
<a href="#">menu</a>
</li>
</ul>
<ul class="c-navbar c-navbar--center">
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item">
<a href="#">menu</a>
</li>
</ul>
<ul class="c-navbar c-navbar--left">
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item">
<a href="#">menu</a>
</li>
</ul>
<ul class="c-navbar c-navbar--right">
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item">
<a href="#">menu</a>
</li>
</ul>
<ul class="c-navbar" data-popup-mode="click">
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item" aria-haspopup="true">
<a href="#">menu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem" aria-haspopup="true">
<a href="#">submenu</a>
<button class="c-navbar__toggle" aria-expanded="false">
<span class="c-ic-angle-right" aria-hidden="true"></span>
</button>
<ul class="c-navbar__submenu" aria-hidden="true">
<li class="c-navbar__subitem"><a href="#">submenu</a></li>
</ul>
</li>
</ul>
</li>
<li class="c-navbar__item">
<a href="#">menu</a>
</li>
</ul>