Control bar

Control bar is a toolbar that provides identification and lets the user navigate and perform actions.

Usage

Control bar is always fixed to the top of the window.

This header is used on almost every page in the system. It has 2 differnet modes that are displayed depending on the product area the user is:

Light mode: active for back-office applications
Dark mode: active for the site

Control Bar modes, on top the dark mode and at the bottom the light mode

Modes & Parts

Both modes are pretty similar and therefore they work similiarly but with a slight change in the position of the global menu access depending on the scope the user is.

Dark mode

Control Bar dark mode variations, in order: default, site and page editor

Left area:
- Product Menu
- Back navigation
- Application title
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.
- Global Menu
- User Sticker: It allows displaying different navigation options and actions to which the user has access.

Light mode

Control Bar light mode

Left area:
- Global Menu
- Back navigation
- Application title
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.