Header is always fixed to the top of the window.
The Header is used on almost every page in the system. The most common configuration is shown below:
- Left area: Used for actions such as triggering the side menu and back navigation
- Center area: Used for the page or application title and help
- Right area: Used for actions. These are identified with an icon when possible and listed inside a kebab menu when an icon is not clear.
- These actions are application level actions
The Header can have different configurations, as you can see in the examples below.
The application title always appears in the header (Web Content in this example). The title remains in the header until the user navigates to a detail page or the user has finished configuring the asset. Related actions for the application may appear on the right side.
Asset or element detail page header
The asset or element title appears in the header. A back button is provided to navigate to the asset/element location in the application. Related actions for the asset/element may appear on the right side.
Main page header on site
The page name is identified in the header. The related actions are listed with three icons on the right side: configuration, add menu, and simulation.
- Product menu button
- Back button
- Page or Application title
- Help icon to trigger help information
- Add menu button
- Simulation button