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.
|Web resource key:||
|AMD Module key:||N/A|
This example includes the optional Quicksearch pattern:
aui-dropdown2-trigger-arrowlessso that no right caret is displayed.
The header is initialised automatically. The timing depends on which of these two triggers occurs first:
This is to avoid reliance on all DOM content being loaded before the header is navigable.
AUI supports adding a logo to the application header pattern. It is assumed that this is the desired default behaviour, so plain-text is hidden in the basic markup pattern.
To add a logo to the header, there are two common approaches.
To set the product logo, replace PRODUCTNAME with your product's name, then add your logo to a CSS rule.
To render plain-text in the place of the logo, you can add the
aui-header-logo-textonly CSS class
You must include the this class to ensure proper rendering for plain text.
If you want to render both an image and plain-text in the application header,
add a second span element with the
aui-header-logo-text CSS class.