<!-- Main header container with banner role --> <header class="qld__header horizontal-example" role="banner"> <!-- Navigation bar for skip links --> <nav class="qld__skip-link" aria-label="skip links" tabindex="-1"> <a class="qld__skip-link__link" href="#content">Skip to main content</a> <a class="qld__skip-link__link" href="#main-nav">Skip to main navigation</a> </nav> <!-- Pre-header section with logo and links --> <div class="qld__header__pre-header qld__header__pre-header--dark"> <div class="container-fluid"> <!-- Government link and logo used for mobile display --> <a href="https://www.qld.gov.au"> <span class="qld__header__pre-header-url">qld.gov.au</span> <img class="qld__header__pre-header-brand-image" alt="Queensland Government" src="./?a=160271"> </a> <!-- CTA wrapper for right aligned links in the preheader --> <div class="qld__header__cta-wrapper"> <a class="qld__header__cta-link" href="javascript:void(0)"> <span class="qld__header__cta-link-icon"> <i class="fa-light fa-phone"></i> </span> <span class="qld__header__cta-link-text">Contact us</span> </a> </div> <!-- Main navigation controls (Search and Menu buttons on mobile and tablet screens) --> <div class="qld__header__main-nav-controls"> <!-- Search button --> <button aria-controls="qld-header-search" class="qld__header__toggle-main-nav qld__main-nav__toggle-search qld__main-nav__toggle-search--open" aria-expanded="false"> <!-- Search and close icons --> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg qld__main-nav__toggle-search-icon"> <use href="./?a=151118#icon-Search"></use> </svg> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg qld__main-nav__toggle-search-close-icon"> <use href="./?a=151118#icon-Close"></use> </svg> <!-- Search button label --> <span class="qld__main-nav__toggle-text">Search</span> </button> <!-- Menu button --> <button aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open"> <!-- Menu icon --> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--lg"> <use href="./?a=151118#icon-Menu"></use> </svg> <!-- Menu button label --> <span class="qld__main-nav__toggle-text">Menu</span> </button> </div> </div> </div> <!-- Main header section --> <div class="qld__header__main"> <div class="container-fluid"> <!-- Header brand section --> <div class="qld__header__brand"> <a href="https://www.choreport.health.qld.gov.au"> <!-- QLD Government logo --> <div class="qld__header__brand-image"> <img src="./?a=160263" alt="A logo representing the Queensland Government"> </div> <!-- Site name and description --> <div class="qld__header__site-name"> <span class="qld__header__heading">Header</span> <span class="qld__header__subline">Subheading</span> </div> </a> </div> <!-- Search form section --> <div class="qld__header__search" id="qld-header-search"> <div class="qld__main-nav__focus-trap-top"></div> <div class="qld__search-form--wrapper"> <form role="search" aria-label="sitewide" class="qld__search-form" id="search-input-global-header" action="#"> <label for="search-input-global-header-query" class="qld__label qld__display-lg qld__search-form__label">Search this website</label> <div class="qld__search-form__inner"> <input type="search" id="search-input-global-header-query" name="query" class="qld__text-input data-hj-allow" autocomplete="off"> <input type="text" id="name" name="name" autocomplete="off" tabindex="-1" class="qld__text-input--validation"> <div class="qld__search-form__btn"> <button class="qld__btn qld__btn--search" type="submit" aria-label="Search"> <span class="qld__btn__icon"></span> <span class="qld__btn__text">Search</span> </button> </div> </div> </form> </div> <div class="qld__main-nav__focus-trap-bottom"></div> </div> </div> </div> </header> <!-- Main navigation bar --> <nav class="qld__main-nav qld__main-nav--mega" id="mainmenu"> <div class="container-fluid"> <!-- Main navigation content wrapper --> <div class="qld__main-nav__content" id="main-nav"> <!-- Navigation menu wrapper --> <div class="qld__main-nav__menu"> <!-- Inner navigation menu wrapper --> <div class="qld__main-nav__menu-inner"> <!-- Focus trap for accessibility purposes (keyboard navigation) --> <div class="qld__main-nav__focus-trap-top"></div> <!-- Navigation header which contains menu title and close button --> <div class="qld__main-nav__header"> <h6 class="qld__main-nav__menu-heading">Menu</h6> <!-- Close button for the menu --> <button aria-controls="main-nav" class="qld__main-nav__toggle qld__main-nav__toggle--close"> <!-- SVG icon for the close button --> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"> <use href="./?a=151118#icon-Close"> </use> </svg> <span class="qld__main-nav__toggle-text">Close</span> </button> </div> <!-- Navigation link list --> <ul class="qld__link-list qld__link-list--flex"> <!-- Here is a navigation item example --> <li class="qld__main-nav__item "> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-home qld__main-nav__item-link" aria-label="Home" href="#"> <!-- SVG icon for the link --> <span class="qld__main-nav__item-icon"> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"> <use href="./?a=151118#icon-Home"> </use> </svg> </span> <span class="qld__main-nav__item-text" data-name="">Home</span> </a> </div> </li> <li class="qld__main-nav__item"> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link" href="#">Category page 1</a> </div> </li> <li class="qld__main-nav__item"> <div class="qld__main-nav__item-title"> <a class="qld__main-nav__item-link" href="#">Category page 2</a> </div> </li> </ul> <!-- ... More elements like call-to-action or additional navigations could go here ... --> <!-- Focus trap for accessibility purposes (keyboard navigation) --> <div class="qld__main-nav__focus-trap-bottom"></div> </div> </div> <!-- Overlay element, which usually displayed when menu is open --> <div class="qld__main-nav__overlay" aria-controls="main-nav"></div> </div> </div> </nav>

Last updated: November 2024