Banners

Ask a question Design guidelines

Summary

Banners appear at the very top of the screen, within the application header, and are reserved for system-level messaging about loss of data or functionality.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-banner
AMD Module key: require('aui/banner')
Experimental API: 5.7
General API: 6

Examples

Code

A banner can be created either through Application Header soy template or the Javascript API.

Soy

AخA
 
{call aui.page.header}
    {param logo: 'confluence' /}
    {param bannerContent}
        Your license has expired. <a href="#">Click here to renew</a>.
    {/param}
    {param primaryContent}
        <div class="aui-nav">
            <li><a href="https://example.com/">Navigation item or dropdown trigger</a></li>
        </div>
    {/param}
        {param secondaryContent}
        <div class="aui-nav">
            <li><a href="https://example.com/">Often an icon-only dropdown</a></li>
        </div>
    {/param}
{/call}

Javascript

The Javascript API is intended for use when HTTP 5xx errors are received from the server.

Demo code
 
<header id="header" role="banner"></header>
 
require(['aui/banner'], function (banner) {
    banner({
        body: 'Your <strong>license has expired!</strong> There are two days left to <a href="#">renew your license</a>.'
    });
});

Options

JavaScript options

These options are set in the options object when creating a flag with JavaScript:

Option Description Possible values Default
body The main content of the message. HTML none