Page header


The Page header component is a persistent UI element located at the top of pages in ADEO's internal products, which helps to maintain consistency throughout the user's journey. It offers contextual information, feature-level navigation, and access to features like Help, Notifications, and Context selection.


To cover a maximum of needs while preserving consistency and ease of use, the Page header component offers multiple configurations through a range of settable elements.

ElementPurposeNotesMandatory / optional
Page titleProvide a concise and precise description of the page content to help users quickly understand the topic or function of the page.The title must match the selected sidebar item at the start. Then on the following pages, it should change to reflect the content.Mandatory
SubtitleComplement the title with additional information to enhance the understanding of the content.Optional
StatusIndicates the status of the page object.Optional
TabsFeature-level navigation.Optional
Back buttonAllows users to return to the previous page or cancel an ongoing task.Can't be combined with the Breadcrumb.Optional
BreadcrumbsAllows users to return to one of the previous pages and find out where they are in their journey.Can't be conbined with the back button.Optional
Key features sectionDisplay a quick access to the help page and the notifications, and allows users the change a context option.Context option can be handle as well from a Select, a Dropdown or an Autocomplete.Optional
ShadowAllows to increase the contrast between the Page header and the page content.Can also appears on scroll if the header is stickyOptional


Page title

Smallsize.font.07Mainly used on subpages when users have started a process. This title variation is often combined with the back button.
Medium (default)size.font.08Used on homepages and at the start of processes and user journeys.
Largesize.font.09Specific uses like landing pages



The Page header is a flexible element that fills the container's width. It must start on the left-hand edge or next to the Sidebar component.

Be aware

Please note that the margins of the Page header depend on the container's width.


For the moment, the Page header component has been designed for desktop devices, from breakpoints L to XXL.


As a component with a cross-functional purpose independent of page content, none of its elements can be disabled. If a feature is not available, it must not be displayed.


The height of the Page header only depends on its configuration and can't be custom-tailored or modified.


The Page header is always displayed above the page content and can be optionally fixed or not while scrolling. In the second case, it can appear when users scroll back to the top of the page.

Do's and Don'ts

Always positioned at the top of the page.
No elements inside the Page header can be disabled.
Never add or modify styles of elements.
Never hide Page title.
Never use on B2C interfaces.