A responsive multi-level menu for site navigation
A demo responsive layout where the navigation is hidden behind a single item at a narrow screen width
A mega dropdown menu for sites with a large tree-like navigation
<h1 class="demo__title">Horizontal megadropdown</h1>
<nav class="o-hierarchical-nav demo--horizontal-theme" data-o-component="o-hierarchical-nav">
<ul data-o-hierarchical-nav-level="1">
<li data-priority="2" aria-controls="megadropdown-p1"><a>Mega 1 p2 <i></i></a></li>
<li data-priority="3" aria-controls="megadropdown-p2"><a>Mega 2 p3 <i></i></a></li>
<li data-priority="1" aria-controls="megadropdown-p3"><a>Mega 3 p1 <i></i></a></li>
<li data-priority="2" aria-controls="megadropdown-p4"><a>Mega 4 p2 <i></i></a></li>
<li class="o-hierarchical-nav__parent"><a>Item 1 <i></i></a>
<ul data-o-hierarchical-nav-level="2">
<li><a>Item 1.1</a></li>
<li><a>Item 1.2</a></li>
<li><a>Item 1.3</a></li>
</ul>
</li>
<li data-priority="1" aria-controls="megadropdown-p5"><a>Mega 5 p1 <i></i></a></li>
<li data-priority="2" aria-controls="megadropdown-p6"><a>Mega 6 p2 <i></i></a></li>
<li data-more aria-controls="megadropdown-pmore" aria-hidden="true"><a>More <i></i></a></li>
</ul>
</nav>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p1" aria-hidden="true">Mega-dropdown for Mega 1</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p2" aria-hidden="true">Mega-dropdown for Mega 2</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p3" aria-hidden="true">Mega-dropdown for Mega 3</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p4" aria-hidden="true">Mega-dropdown for Mega 4</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p5" aria-hidden="true">Mega-dropdown for Mega 5</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-p6" aria-hidden="true">Mega-dropdown for Mega 6</div>
<div class="o-hierarchical-nav__mega-dropdown demo__mega-dropdown" id="megadropdown-pmore" aria-hidden="true">Mega-dropdown for More</div>