Page header

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.

Status

Examples

1. Breadcrumbs
2. Parent page

Page Title

ActionActionAction

Code

HTML

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

• (required) a heading
• breadcrumbs
• action buttons to the right
• avatar to the left
• small form (eg. search) although this is unusual

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

This is a strict pattern. Variation from the markup documented here is not supported.

<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="Atlassian logo" src="img/avatar-64.png"> </span>
      </span>
    </div>
    <div class="aui-page-header-main">
      <ol class="aui-nav aui-nav-breadcrumbs">
        <li><a href="http://example.com/">Breadcrumbs</a></li>
        <li><a href="http://example.com/" class="custom">Sub-page</a></li>
        <li class="aui-nav-selected">Direct parent page</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">Action</button>
      <button class="aui-button">Action</button>
      <button class="aui-button">Action</button>
      </div>
    </div>
  </div>
</header>