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
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.

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.