Header toolbar

Header toolbar is a Toolbar based component used in headings for portlets, mobile pages, and page sections.

Usage

header tooldbar dark background

This toolbar is used in almost every page in the system. It can have different configurations as you can see in examples section:

  • Left area: Used for actions as triggering the side menu and back navigation
  • Center area: Used for the page or application title.
  • Right area: Used for actions, explicit when it is possible and a maximum number of 3. Implicit inside a kebab menu when the metaphor is not clear.

Example

animated gif that shows how a header toolbar work with different interactions

Menu