Page Header Pattern Version 2.0.0.0 Print this Page
 
 
Description
Return to Top
The page header is part of the page architecture. The page header contains mandatory elements for naming a page and navigating back. Place the primary action in the top-right corner of the page header and additional actions, such as search and sort, in the optional region beneath the page title.

Pattern Sample
Return to Top
The following is an overview of page header elements.
Figure 1. Diagram of elements
Required Screen Elements
Component Type Required Components Customizable or Extendable Components
Page Header

When naming the page, use the object term, such as "Contact," or an actual description, such as the person's name. Be consistent with the naming convention that you choose.

Replace the Back button with a Cancel button for screens that have a Save button. Place the Save button in the primary action position.

Subheader Region (optional) NA

Key Considerations
Return to Top
  • The text for the page title should exactly match the text of the navigation link that the user selects on the page being navigated from.
  • Keep the page title short and no more than one row. If there is more text, use truncation with ellipses (…) at the end of the row.
  • Use "Back" as the button label for consistency and translation considerations.
 
Interaction Examples
Return to Top
The page header changes as the user moves throughout the application.

Page Header Example 3
Figure 2. Editing a contact flow
On Device Examples
Return to Top
Here are two examples of editable contact information.
iPhone Page Header Example
Figure 3. iPhone Safari
BlackBerry Page Header Example
Figure 4. Blackberry Bold browser
Here are examples taken from Oracle Fusion Mobile Sales.
iPhone Native Example
Figure 5. Native iPhone
BlackBerry Bold Native Example
Figure 6. Native Blackberry Bold (Back button is selected)
 
About Oracle | Legal Notices | Terms of Use | Your Privacy Rights