Application header

Ask a question Design guidelines

Description

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.

Summary

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

Examples

Code

Soy

This example includes the optional Quicksearch pattern:

Options

  • The logo can be set to a product logo or simple text
  • Header navigation can be simple links, dropdown2 triggers, a primary button for the hero action
  • Header contains a quick search pattern
  • 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.

Asynchronous initialisation

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:

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

whichever of these two triggers happens first.

Logo options

The logo pattern is:

To set the product logo, replace aui-header-logo-PRODUCTNAME with one of the following:

  • aui-header-logo-aui
  • aui-header-logo-bamboo
  • aui-header-logo-bitbucket
  • aui-header-logo-confluence
  • aui-header-logo-crowd (AUI 5.1+)
  • aui-header-logo-fecru
  • aui-header-logo-hipchat
  • aui-header-logo-jira
  • aui-header-logo-stash

Or for plain text:

  • aui-header-logo-textonly

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.