Skip to main content

Sidebar Navigation

Component status:Beta

Sidebar Navigation#

<div class="bux-container bux-container--sidebar-nav">
<nav id="sidebar-nav" aria-label="Sidebar Navigation">
<ul class="bux-sidebar-nav" role="menubar">
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link bux-sidebar-nav__link--active">Item 1</a>
<ul>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1</a>
<ul>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.1</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.1.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 1.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2</a>
<ul>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2.1</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 2.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4</a>
<ul>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4.1</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4.2</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4.3</a>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 4.4</a>
</li>
</ul>
</li>
<li class="bux-sidebar-nav__item">
<a href="#" class="bux-sidebar-nav__link">Item 5</a>
</li>
</ul>
</nav>
</div>