Control Menu Bar

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

Usage

Control Menu Bar is always fixed to the top of the window when we are on medium/large screens.

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 Menu 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 Menu 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 Menu 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.