Control bar

Usage

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:
  • Actions: They are identified with an icon when existing, and listed inside an actions menu when an icon is not clear. These actions are application level actions.
  • User Sticker: It allows displaying different navigation options and actions to which the user has access.

Parts

1. Product menu button
2. Back button
3. Page or Application title
4. Configuration
5. Add menu button
6. Simulation button

Examples

Application header

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. At the end of the right side, it appears the user sticker.

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. At the end of the right side, it appears the user sticker.

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.