<nav class="au-main-nav " aria-label="main">
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="main-nav-default" class="au-main-nav__content">
<button aria-controls="main-nav-default" class="au-main-nav__toggle au-main-nav__toggle--open" onclick="return AU.mainNav.Toggle( this )">
<span class="svg-inline--fa fa-fw">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
</svg>
</span>
Menu
</button>
<button class="au-main-nav__toggle au-main-nav__toggle--search au-main-nav__toggle--open">
<span class="svg-inline--fa fa-fw au-main-nav__toggle--search__closed">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
</svg>
</span>
<span class="svg-inline--fa fa-fw au-main-nav__toggle--search__open">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
</svg>
</span>
Search
</button>
<div class="au-main-nav__menu">
<div class="au-main-nav__menu-inner">
<div class="au-main-nav__focus-trap-top"></div>
<button aria-controls="main-nav-default" class="au-main-nav__toggle au-main-nav__toggle--close" onclick="return AU.mainNav.Toggle( this )">
<span class="svg-inline--fa fa-fw">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
<path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path>
</svg>
</span>
Close
</button>
<ul class="au-link-list">
<li class="active"><a href="#" aria-current="page">Home</a></li>
<li><a href="#">Dinosaurs</a></li>
<li><a href="#">Interesting facts</a></li>
<li><a href="#">Resources</a></li>
</ul>
<div class="au-main-nav__focus-trap-bottom"></div>
</div>
</div>
<div class="au-main-nav__overlay" aria-controls="main-nav-default" onclick="return AU.mainNav.Toggle( this )">
</div>
</div>
</div>
</div>
</div>
</nav>
Designed to work within the header component.
The primary navigation should be consistent for all websites (or website entities).
Examples of website entitities include:
The style of the navigation is determined by the parent classes:
au-main-nav
au-main-nav--dark
The style should match the header.