Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Control Menu Bar

Sign In
View in FigmaView in ClayLIFERAY DXP

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.
Something to improve? Report an issue!
Menu