Intro

The page header is a crucial component of any application interface, serving as the first point of interaction for users. A well-designed header not only enhances navigation but also sets the tone for the entire user experience. This guideline is based on the dynamic page header, which offers a flexible structure and interaction capabilities to support a variety of application scenarios.

Page header

When to Use

Anatomy

Page header areas

1. Header title: The title area hosts the mandatory page title and the common, but optional elements – breadcrumbs, subtitle/summary, key information, and actions. When the header collapses, the title area remains visible, with the page title and actions always persistent. The contents can adapt between expanded and collapsed modes (for example, a list report can show the filter summary in the subtitle when collapsed).
2. Header content: A collapsible area which can hold any structured or unstructured content. The entire content is hidden when the header is collapsed.

Anatomy of page header areas

Page header elements

1. Title: A title describes the purpose and/or the contents of the page.
2. Breadcrumbs (optional): A breadcrumb is a type of secondary navigation that indicates the position of a page within the application hierarchy.
3. Key information (optional): Key information is a dedicated section that showcases essential indicators of the page contents, such as KPIs or object status.
4. Global actions (optional): Actions relevant for the entire page appear on the right-hand side of the header title bar. For more information, see header toolbar.
5. Layout actions (optional): Typical layout actions are the Close, Full Screen, or Exit Full Screen icons, which are mainly used when a page is presented in a flexible column layout.
6. Header feature (optional): Controls to expand/collapse and pin/unpin the header content. These controls are hidden if the header content area isn’t used.
7. Header content (optional): The content varies based on the use case and floorplan. This area is used to display contextual information about the object or filters relevant to the page content. It’s hidden when the header is collapsed.
8. Subtitle/summary (optional): A subtitle is a secondary text that supports the main title. It can also be used to display summarized header content, such as applied filters, when the header is collapsed.

Elements of a page header

Behavior and Interaction

Since the page header is part of the dynamic page layout, it follows the same interaction patterns.

For more details on page header behavior and interactions, see the dynamic page layout.

Expand and collapse

The page header supports expanded and collapsed modes. In the expanded mode, users can see more page-level information in the header. In the collapsed state, the header content area is hidden and the title shrinks, freeing vertical space for the page content. The page-level messages remain visible until the user dismisses them manually.

Pin

Activating the pin feature keeps the header expanded while the user scrolls through the page content. This interaction works only in combination with expandable/collapsible header content.

To save vertical space, don’t offer the pin feature for size S screens.

Dynamic page header with pin feature activated

Responsive Behavior

The page header adapts automatically to all screen sizes based on the responsive spacing system. For more details on page header responsiveness, see the dynamic page layout.

Title and subtitle

The title and subtitle truncate in collapsed mode to save vertical space and wrap in expanded mode to show the full text. This behavior is provided by the respective controls. We recommend a maximum of two lines in collapsed mode to avoid an oversized header, especially on mobile when no summary line is present. Those two lines can be either a title with a subtitle, or a single longer title that wraps to two lines.

The title has the highest priority for space allocation. Elements that share the same horizontal space, such as key information and actions, move to overflow before the title wraps or truncates.

For more information, see Wrapping and Truncation.

Title and subtitle wrap in expanded mode and truncate in collapsed mode

Key information

Global actions

Layout actions

The placement of layout actions depends on the page width:

• Screen size S, M: Layout actions appear in a separate row above the global actions.
• Screen size L, XL or more: Layout actions appear to the right of the global actions on the same line.

This breakpoint is based on the page width, not the window width, and applies regardless of whether the page is used in the flexible column layout, on desktop, or on mobile.

Size L: Layout actions next to global actions

Size S: Layout actions above global actions

Best Practices

Title

Every application page must have a visible title in the page header that describes its topic and purpose.

Make the title concise. Remove non-essential words to improve scannability and to avoid excessive wrapping or truncation when space is limited.

If using an object name or ID as the title, ensure it’s identifiable. Add the type before the name/ID to help the user identify the object, if needed. Use the format "Object type: <Object name/ID>". For example, "Order: A100201".

There are two types of title in page header:

A. Static: A simple, static text title in the page header.
B. Dynamic: A title that contains dynamic elements, such as variant management.

Page title types

Accessibility requirements

Every page must have a single static <h1> heading that describes its topic and purpose. Dynamic elements – such as variant management components or input fields – don’t qualify, because their labels change, and assistive technologies can’t rely on them to identify the page.

The <h1> can be visible or visually hidden, but it must always be present in the DOM. If a visible heading suits the design, add a simple text title (<h1>) alongside the dynamic element. If a visible heading doesn’t fit, insert an <h1> at the top of the page using a screen-reader-only technique. The heading won’t appear on screen but remains fully accessible to assistive technologies.

Page-level avatar

You can add a page-level avatar to the page header title area or header content area.

Use a size S avatar before the page title and subtitle in the title area. In the header content area, pick the size based on the other elements.

Use only one avatar per header in expanded and collapsed modes.

For more information, see Avatar.

Page-level avatar in collapsed mode

Global actions

The global actions toolbar located in the page header contains actions that are valid for the entire page, except for the closing and finalizing actions that end the current process.

• Use text buttons for all business specific actions.
• Use icon buttons for all generic actions, such as Favorite, Flag, Share, and paging.
• Use no more than one primary button to highlight the most important action for the page.
• Since space is limited, try grouping related actions using menu buttons.
• Use an overflow toolbar if there are multiple global actions. This activates the overflow when there isn't enough space. The app team can decide which actions can move into the overflow and which actions are so important that they should never move into the overflow.

For more information, see Toolbar.

Global actions in the page header

Page-level breadcrumbs

Presenting the current page in breadcrumbs is optional but must be consistent across all pages within a product.

In applications with a fixed hierarchy, use static breadcrumbs. These breadcrumbs always display the current page location the same way, regardless of how the user arrives there.

Consistent presentation of breadcrumbs throughout the product helps users orient themselves and sets clear expectations. Breadcrumbs should consistently start from the same hierarchy level to improve usability.

Breadcrumb patterns

Use the breadcrumb patterns described below for each navigation level.
Note: Underscore indicates a navigable link.

"Back to" link

Header content

Depending on the use case, the header can include various elements such as filters, charts, or forms. See Use Cases and Page Types.

If no extra header content is required, use a single, static header without expand/collapse functionality.

No header content, without expand/collapse feature

Use Cases and Page Types

The page header can display different elements based on the use cases or page types. The following are some of the common use cases.

List report (object list)

A list report page enables users to view and manage a large collection of items. Users can locate and interact with relevant items using the search and filter options in the page header. It often serves as an entry point for navigating to item details, which are typically displayed on an object page.

Recommended page title syntax

Use the object type in plural form as the page title (for example, Purchase Orders). If variant management is used, provide a meaningful, descriptive label for the default view, such as Active Orders.

For more information, see List Report Floorplan.

Example of a list report page header with a filter bar

Analytical list page

An analytical list page enables users to analyze large datasets, identify root causes, and take action on transactional content. It helps users find interesting areas within datasets or significant individual instances through data visualization and business intelligence. A visual filter bar, consisting of a set of interactive charts, offers a unique way to filter large datasets via visualization and is included in the page header.

Recommended page title syntax

Use the object type in plural form as the page title (for example, Suppliers). If variant management is used as the page title, provide a meaningful, descriptive label for the default view, such as Active Suppliers.

For more information, see Analytical List Page Floorplan.

Example of an analytical list page header with a visual filter bar and filter toggle

Object page

The object page displays and organizes all relevant information about an object. It can be in display or edit mode. The page header provides context to help the user identify the object shown and the actions they can take.

Recommended page title syntax

Use the object name or object ID directly as the page title. If the object name or ID is unclear, append the object type in front to provide the context (for example, Order Item: 019204X), or use the subtitle for context.

For more information, see Object Page Floorplan.

Example of an object page header with context information

Wizard page

A wizard page assists users in completing lengthy or complex tasks by dividing them into sections and guiding them step-by-step. It includes two types of screens: walkthrough screens and a summary screen. A progress bar, which can be either in anchor or tab mode, is located just below the page header to help users follow their progress. When an anchor bar is used, the summary page appears as a separate screen. With a tab bar, the summary is usually the final step. Typically, use a wizard page for tasks with 3 to 8 steps.

Recommended page title syntax

If the wizard page is used to create new object, use the format, New <Object Type>, as the page title. For example, New Customer. If the wizard page is used to walk users through a complex process, use the process name as the page title. For example, Check Out.

If the wizard page is used to create a new object, use the format "New <Object Type>" as the page title (for example, New Customer). If the wizard page is used to walk users through a complex process, use the process name as the page title (for example, Check Out).

For more information, see Wizard Floorplan.

Example of a wizard page header with a progress bar

Create Page

A "create" page is an object page in create mode.

Recommended page title syntax

Use the format “New <Object Type>” as the page title (for example, New Customer). This page title can be replaced with the actual object name or object ID as soon as it is entered or generated.

For more information, see Object Page Floorplan.

Example of a page header for a "create" object page

Related Links