Atlassian is standardising the header pattern across its suite of apps. To have consistent experiences with multiple products we're making the common areas of usage look and work the same every time.
Each app will have its own logo and set of specific navigation. The right side of the header is for search, administration tasks, help and the user menu.
| API status: | general |
|---|---|
| Included in AUI core? | Yes. You do not need to explicitly require the web resource key. |
| Web resource key: |
com.atlassian.auiplugin:aui-header, com.atlassian.auiplugin:aui-header-async (async initialisation) |
| AMD Module key: | N/A |
| Experimental since: | 5.0 |
| General API status: | 5.1 |
This example includes the optional Quicksearch pattern:
aui-dropdown2-trigger-arrowless so that no right caret is displayed.By default, the header will be initialised when the DOM content has loaded. The header can also itself be initialised asynchronously after it is inserted into the DOM. This may be useful if you cannot rely on the DOM content being loaded in time, but still need the header to be initialised.
Asynchronous initialisation of the header component is available via a separate resource.
Include the com.atlassian.auiplugin:aui-header-async web-resource or the aui-header-async.js file:
Including this resource will cause each header component to be initialised either:
whichever of these two triggers happens first.
The logo pattern is:
To set the product logo, replace aui-header-logo-PRODUCTNAME with one of the following:
Or for plain text:
You must include the this class to ensure proper rendering for plain text.
For custom logos, you can either add your own class; or replace the aui-header-logo-device span with an IMG tag.