Health Design System

Header

Header

⭐ Design System - Header

The header component uses and requires the

components to create the mobile navigation and search experience.

Javascript copies the elements from Sub nav into the main navigation and only shows them on mobile.

The search box is moved depending on the screen size.

<header class="au-header pillars-container" role="banner">
    <div class="container">
        <div id="pillars"></div>
        <div class="row">
            <div class="col-xs-12 col-md-6">
                <a href="/" title="Home" rel="home" class="au-header__logo">
                    <img src="../../images/logo.svg" alt="Australia Government Department of Health" class="au-header__logo-image au-responsive-media-img" />
                </a>
                <div class="au-sronly">
                    <p>Australian Government Department of Health and Aged Care</p>
                </div>
            </div>
            <div class="col-xs-12 col-md-6">
                <div class="health-sub-nav text--align-right">
                    <h3 class="au-sronly">Sub menu</h3>
                    <ul class="au-link-list au-link-list--inline">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </div>
                <div class="health-search health-search--global">
                    <form class="au-form">
                        <div class="health-search__form__input-wrapper">
                            <div class="au-form__item">
                                <label class="au-sronly" for="search-field">Search</label>
                                <input placeholder="Search this website" class="health-search__form__input au-text-input au-text-input au-text-input--block ui-autocomplete-input" size="30" type="text" id="search-field" name="funnelback_search_field" value="" maxlength="128" autocomplete="off">
                            </div>
                            <div class="health-loading"></div>
                        </div>
                        <input class="health-search__form__submit au-btn au-btn" type="submit" name="submit" value="Search">
                    </form>
                </div>

                <script language="JavaScript">
                    $(document).ready(function() {
                        health.searchAutocomplete('#search-field', dinosaurData);
                    });
                </script>
            </div>
        </div>
    </div>
</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>