Masthead
Required for NSW Government Masterbrand products
The NSW Government network masthead displays across the top of all NSW Government sites. It helps users see which service they are using.
Show code Hide code
Usage
The Masthead clearly identifies your site as part of the NSW Government. The Masthead component includes a Skip Link accessibility feature that allows users to jump to the main content of the page.
Depending on your Brand classification there are rules for which Masthead should be used:
Guidance
- display the Masthead across the top of all NSW Government sites
- prefer the Default Masthead for Masterbrand non-corporate and co-brand sites, or use the Light Masthead if Blue 01 is not suitable with the brand colours
- conditionally render the screen-reader-only Quick Exit announcement message directly in the Masthead template, immediately before the Skip Link container. This ensures the message is available without JavaScript
- ensure the Masthead template includes the standard Skip Link navigation in the correct position so the Quick Exit script can prepend its announcement message reliably.
- use a Masthead other than the Default Masthead for Masterbrand corporate sites; the Default maintains a strong and consistent connection to NSW Government
- place another interactive child before the Skip Link
- remove existing skip links when integrating the Quick Exit component
- rely on the Quick Exit script's automatic announcement as the primary method; treat it as progressive enhancement
- add a separate "skip to Quick Exit" link when using the Quick Exit component on a page.
Skip Link
The Skip Link component helps keyboard-only and screen-reader users skip to the main content on a page, this includes skipping over the header and navigation. The Skip Link is visually hidden until a keyboard press focuses and activates it.
Important: In a standard setup there is no special logic to make the skip link the first focussable element — this comes from its position in the DOM.
Quick Exit integration
For full details on how the Quick Exit banner behaves, including placement and keyboard shortcuts, see the Quick Exit component. Use that documentation alongside this Masthead guidance when implementing safety controls on your site.
Accessibility
All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.