Skip links and keyboard navigation

SWE components

Header

On this page

Overview

The header includes:

  • Queensland Government logo
  • portal links bar
  • search
  • navigation
  • location widget.

All elements within the header are required, with exception to the location widget. This is optional and can be used to personalise in-page content by location.

Site navigation is automatically included. If you are building an agency page and need to change this, make a copy of the default include, make your changes, and point to your new copy.

Default

The header component can be seen in action at the top of this page. The following are image representations of the header at key SWE breakpoints:

Desktop

View example in Storybook

Mobile

View example in Storybook

Code

View the full source code for the header component on GitHub.

With a minimised global search field

You may find your page has multiple search fields. To help avoid confusion for users over which search field to use you can minimise the global search field.

Add the following classes to your in-page search form (not the global search form):

  • qg-site-search__multiple-forms to the parent form element
  • qg-search-site__input to the search field input, which toggles the visibility of the global search field.

View example in Storybook

Code

 <form action="#" role="search" class="qg-site-search__multiple-forms">
   <input type="text" class="qg-search-site__input">
 </form>
Last updated:
28 June 2024