Used at page level for displaying the current item in use, the header bar will show up at the very top of the page, right underneath the Topbar, but will not have a fixed position and instead it will scroll with the rest of the content.

Anatomy

The component itself doesn't have a specific width, instead it takes up the full space of its parent container. It does however have a fixed height of 80px.

  1. Button

A. Item switcher 2. Item name 3. Call to action

B. Date range 4. Range name 5. Range value

https://invis.io/R9YNS1L8VMW#/430716326_Header_Bar_-_Anatomy

Examples

The button on the left should use an icon that is representative of the type of item in use:

https://invis.io/C9YNS1X457D#/430716327_Header_Bar_-_Examples

When hovering the header bar on a subpage, the button icon should change to an arrow to show that backwards navigation is possible. This will also be confirmed by a Tooltip that shows when hovering the actual button itself.

https://invis.io/92YNS278UFW#/430716328_Header_Bar_-_Back_Navigation