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:

{call aui.page.header}

  {param logo: 'jira' /}

  {param headerLink: '#' /}

  {param primaryContent}

    <ul class="aui-nav">

      <li><a href="https://example.com/">Navigation item or dropdown trigger</a></li>

      <li><a href="https://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="search" name="quicksearchname" placeholder="Quick Search" class="search" id="quicksearchid">

        </form>

      </li>

      <li><a href="https://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.

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.

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

<nav class="aui-header" role="navigation">

    <div class="aui-header-primary">

        <h1 id="logo" class="aui-header-logo aui-header-logo-PRODUCTNAME">

            <a href="https://example.com/">

                <span class="aui-header-logo-device">My application name</span>

            </a>

        </h1>

    </div>

</nav>

.aui-header .aui-header-logo-PRODUCTNAME .aui-header-logo-device {

    background-image: url('images/aui-sandbox.png'); /* place your image here */

    width: 32px; /* add your logo's width here */

}

To set the product logo, replace PRODUCTNAME with your product's name, then add your logo to a CSS rule.

Use an image element

<nav class="aui-header" role="navigation">

    <div class="aui-header-primary">

        <h1 id="logo" class="aui-header-logo aui-header-logo-custom">

            <a href="https://example.com/"><img src="images/aui-sandbox.png" alt="My application name"></a>

        </h1>

    </div>

</nav>

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.

<nav class="aui-header" role="navigation">

    <div class="aui-header-primary">

        <h1 id="logo" class="aui-header-logo aui-header-logo-textonly">

            <a href="https://example.com/">My application name</a>

        </h1>

    </div>

</nav>

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.

<nav class="aui-header" role="navigation">

    <div class="aui-header-primary">

        <h1 id="logo" class="aui-header-logo aui-header-logo-custom">

            <a href="https://example.com/">

                <img src="images/aui-sandbox.png" alt="My application name">

                <span class="aui-header-logo-text">Some extra text</span>

            </a>

        </h1>

    </div>

</nav>