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:
- The header must contain skip links as the first couple child elements to make it easier for keyboard-only users to jump to the crucial page content
- The header may contain banners with system-level messages
- The logo can be set to a product logo or simple text
- The header navigation can be simple links, dropdown2 triggers, a primary button for the hero action
- The header contains a quick search pattern
- The header navigation items can contain an icon or avatar (aui-avatar-small) and also be dropdowns. If you include these, they must contain the
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:
- when the document has loaded, or
- asynchronously after the header is inserted into the DOM.
This is to avoid reliance on all DOM content being loaded before the header is navigable.
Rendering a logo
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.
Use an image element
Use plain text
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.
Rendering a logo and 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.