Intro
The page header is the topmost section of a page that provides key information about the current object or user, along with primary actions. It unifies the object header and profile header into a single, flexible component that adapts to different contexts and layouts. Designed with a slot-based structure, it allows for customized content and arrangement while maintaining visual consistency across apps.
Page header on compact screen (left) and expanded screen (right)
Usage
Do
Use concise wording.
Don't
Don’t use wordy or lengthy content in the page header.
Anatomy
A. Main Content Area
The main content area contains information about the object, such as image, title, status, and supporting attributes. Additional information such as description and header chart may be placed on other pages based on space.
B. Pagination (Optional)
Pagination is a non-interactive visual indicator consisting of inline dots indicating the number of pages on the object header and the user’s position on the page.
It is used as an overflow if the object header must support multiple content types such as description, charts, or KPI.
Page header anatomy
Behavior and Interaction
Scroll Collapse
The header moves along as users scroll down the page as default setting. Content scrolls down under the app bar.
If the user scrolls up, the header collapses to show more vertical areas. If the user scrolls back, the header returns to its default height.
Scroll collapse
Horizontal Swipe
To fit different content types, content can be distributed into a collection of slides. To navigate, the user horizontally swipes to move between slides. A pagination indicator is displayed at the bottom of the page header to indicate the total number of slides and the user’s current position in the collection of slides.
Horizontal swipe
Action Button
The header itself is not clickable. Only the action buttons placed in the header are interactive.
Selecting the overflow icon button in the header
Push Navigation
Tappable header chart titles can be enabled to allow the user to push navigate from the page header to the full-screen chart and vice versa. Tappable header chart titles are tinted in CTA colors to indicate their interactivity.
Push navigation
Variations
Object Header
The object header is the topmost area in the object’s detail page that provides a detailed glimpse of that object. The object header provides an area that contains information such as object title, subtitle, and description amongst other supplementary information.
Object header on compact screen
Profile Header
The profile header gives a quick intro to the user. It also includes methods to contact that person quickly without needing to access a different area of the profile page.
Profile header on compact screen
Adaptive Design
For compact screen sizes, page headers are designed to be narrower, optimizing the limited screen width of phones for a better portrait view.
In contrast, medium and expanded sizes allow for wider page headers, making better use of the available space and creating a more open and attractive layout.
Page header in compact screen (left) and expended screen (right)
The page header also allows for multiple alignment options.
Profile header centered-aligned in compact screen (left) and left-aligned in expended screen (right)
On expanded screens, longer content can adapt to various layout structures. When transitioning to a compact screen, it can be spread across multiple slides, utilizing pagination to indicate horizontal swiping.
Extra content and fit in expanded screen(left) and move the extra content to the second page in compact screen (right)
Best Practices
The page header component can be tailored for different scenarios by taking advantage of its flexible layout and alignment options.
Best practices for the page header
Resources
Development: FioriPageHeader, FioriObjectHeader, ObjectHeader
SAP Fiori iOS: Object Header, Profile Header