App Header
App Drawer
Title Bar
Tabs
Control Bar
1. Required Components
The App Header and the Title Bar are required to appear together on every page. This allows users to access global navigation and see the title of every page.
2. Tabs
The Tabs may be used to allow users to alternate between content at the same hierarchical level. When used in the page header, the Tabs should use the Large size. The tabs should be positioned directly below the App Header.
3. Control Bar
The Control Bar may be used in the page header if there is only one data table or list in the body of the page. The Control Bar should be position as the bottom most component of the page header. The control bar shouldn't be used in the page header if there are multiple tables or lists in the page body. If the page has multiple data tables, each table should have it's own attached control bar.
Related Pages
Accessibility
The page header will incorporate all the accessibility feature from the components within it.
All page header content color should follow contrast ratio AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Benefits: People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.¹
Additional Reading
Sticky Headers: 5 Ways to Make Them Better https://www.nngroup.com/articles/sticky-headers/
Best Practices for Website Header Design https://uxplanet.org/best-practices-for-website-header-design-e0d55bf5f1e2