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.

As of AUI 5.1, the application header collapses at smaller screen sizes - extra navigation items are moved into a "More" dropdown.

You must include AUI Soy in order for the application header to work.

Status

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`
Experimental since:	5.0
General API status:	5.1

Examples

Code

HTML

This example includes the optional Quicksearch pattern:

<!-- Must be the immediate child element within <header role="banner" id="header"> from the Page pattern -->
<nav role="navigation" class="aui-header aui-dropdown2-trigger-group">
  <div class="aui-header-primary">
    <h1 class="aui-header-logo aui-header-logo-jira" id="logo"><a href="#"><span class="aui-header-logo-device">JIRA</span></a></h1>
    <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>
  </div>
  <div class="aui-header-secondary">
    <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>
  </div>
</nav>

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

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.