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:

{call aui.page.header}
  {param logo: 'jira' /}
  {param headerLink: '#' /}
  {param primaryContent}
    <ul class="aui-nav">
      <li><a href="http://example.com/">Navigation item or dropdown trigger</a></li>
      <li><a href="http://example.com/" class="aui-button aui-button-primary">Primary button</a></li>
    </ul>
  {/param}
  {param secondaryContent}
    <ul class="aui-nav">
      <li>
        <form class="aui-quicksearch" method="post" action="/foo">
          <label class="assistive" for="quicksearchid">Search</label>
          <input type="text" name="quicksearchname" placeholder="Quick Search" class="search" id="quicksearchid">
        </form>
      </li>
      <li><a href="http://example.com/">Often an icon-only dropdown</a></li>
    </ul>
  {/param}
{/call}

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:

<h1 id="logo" class="aui-header-logo aui-header-logo-PRODUCTNAME">
    <a href="http://example.com/"><span class="aui-header-logo-device">Name of product</span></a>
</h1>

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.