Liferay.Design / Lexicon
/
Get StartedResources
Part of Liferay, IncPowered by Gatsby and Netlify

Control bar

Sign In
View in FigmaView in ClayLIFERAY DXP

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