Skip to main content

Menu

JSThis component requires JavaScript.
Component status:Beta

Menu#

<div class="bux-container bux-container--menu">
<nav id="main-menu" aria-label="Main Navigation">
<ul class="bux-menu" role="menubar">
<li class="bux-menu__item">
<a href="#" class="bux-menu__link bux-menu__link--active">Item 1</a>
<ul>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.1</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.2</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.3</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 1.4</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 2</a>
<ul>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 2.1</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 2.2</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 2.3</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 2.4</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 3</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 4</a>
<ul>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 4.1</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 4.2</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 4.3</a>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 4.4</a>
</li>
</ul>
</li>
<li class="bux-menu__item">
<a href="#" class="bux-menu__link">Item 5</a>
</li>
</ul>
</nav>
</div>

Usage Note#

The current implementation of the menu component requires the use of the a11y Navbar Library.