Application header

Summary

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.

Status

Examples

Code

Soy

This example includes the optional Quicksearch pattern:

Options

• 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-arrowless so that no right caret is displayed.

Initialisation

The header is initialised automatically. The timing depends on which of these two triggers occurs first:

1. when the document has loaded, or
2. asynchronously after the header is inserted into the DOM.

   a note: <aui-header-end></aui-header-end> element needs to be present as the last child of <nav class="aui-header"...> to enable asynchronous initialisation. The element is already there when using aui.page.header soy template.

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.

Use CSS

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 to the aui-header-logo element. 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.