Header toolbar

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

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.

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