Page headers

Ask a question Design guidelines

Summary

The page header gives context to the content within the page. It is made up of a combination of the page title, avatar, metadata and related actions of the title. This is a strict pattern. Variation from the markup documented here is not supported.

Status

API status: general
Web resource key: com.atlassian.auiplugin:aui-page-header
AMD Module key: N/A
Experimental API: 3.7
General API: 5

Examples

  1. Breadcrumbs
  2. Parent page

Page title

Code

HTML

The page header is designed to include one or more of the following elements.

  • A heading (required).
  • Breadcrumbs
  • Action buttons that should be located at the right side of the header.
  • An avatar that is located to the left.
  • A small form such as a search field.

Note:

Avatar, breadcrumb navigation and Buttons are components in their own right, combined with the Page Header wrapper.

Demo code
AخA
 
<header class="aui-page-header">
    <div class="aui-page-header-inner">
        <div class="aui-page-header-image">
            <span class="aui-avatar aui-avatar-large aui-avatar-project">
                <span class="aui-avatar-inner">
                    <img alt="My awesome project" src="images/avatar-project.svg">
                </span>
            </span>
        </div>
        <div class="aui-page-header-main">
            <ol class="aui-nav aui-nav-breadcrumbs">
                <li><a href="https://example.com/">Breadcrumbs</a></li>
                <li><a href="https://example.com/" class="custom">Sub-page</a></li>
                <li class="aui-nav-selected"><span class="assistive">Current page:</span> Direct parent page name</li>
            </ol>
            <h1>A typical page header with an avatar, breadcrumbs and actions</h1>
        </div>
        <div class="aui-page-header-actions">
            <div class="aui-buttons">
                <button class="aui-button aui-button-subtle">Subtle button</button>
                <button class="aui-button aui-button-subtle">Subtle button</button>
                <button class="aui-button aui-button-subtle">Subtle button</button>
            </div>
        </div>
    </div>
</header>