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 skipLinks: [['href': '#main', 'label': 'Skip to main content']] /}

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

        <!--

            Keep in mind the quicksearch should have an unique `id`

            so that you can target it with a skip-link.

            See page layout docs for an example.

            Also for the purpose of landmark navigation using

            screen reader software use the `role="search"`.

        -->

        <form class="aui-quicksearch" method="post" action="/foo" id="search" role="search">

            <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 header must contain skip links as the first couple child elements to make it easier for keyboard-only users to jump to the crucial page content
• The header may contain banners with system-level messages
• The logo can be set to a product logo or simple text
• The header navigation can be simple links, dropdown2 triggers, a primary button for the hero action
• The header contains a quick search pattern
• The 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">

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

            <!-- Keep in mind that labels should be translated -->

            <a href="https://example.com/" aria-label="Go to home page">

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

            </a>

        </span>

    </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">

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

            <!-- Keep in mind that labels should be translated -->

            <a href="https://example.com/" aria-label="Go to home page"><img src="images/aui-sandbox.png" alt="My application name"></a>

        </span>

    </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">

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

            <!-- Keep in mind that labels should be translated -->

            <a href="https://example.com/" aria-label="Go to home page">My application name</a>

        </span>

    </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">

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

            <!-- Keep in mind that labels should be translated -->

            <a href="https://example.com/" aria-label="Go to home page">

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

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

            </a>

        </span>

    </div>

</nav>