Main navigation

Design System - Main 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.

<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>