The product header contains creation tools, help, messages, and settings utility menus that apply to all areas of the application. Items in the product header that require the user’s attention may be highlighted by a notification badge. Within the product header, the create menu allows the user to create and access important application related items, while the utility items on the right are for utility; settings, help, and inbox.
When to use
The product header should be used on every standard page (besides trowsers and pop-up windows).
Appearance and behavior
The Product Header is anchored to the top of the page at all times. When a user scrolls, the Product Header remains anchored to the top of the browser viewport, in a “sticky” state. The global transaction flyout and the utility flyout buttons are grouped and aligned right.
Flyouts use a slide transition upon opening; they slide down from the header and slide over the page contents. They can be closed by clicking on the selected Button within the header or anywhere outside the flyout. Upon closing, they slide up into the header. Once the flyouts are open, the background is dimmed with 60% of #000.
The global transaction flyouts are the first two positions on the right of the product header. Clicking an icon button in the header will open the corresponding flyout. Clicking the icon button again or clicking outside of the flyout will close it.
The first button is create transactions, and opens the create flyout. The “+” button animates when clicked where the icon rotates to an “x” to close the flyout, and then back to a “+”. The second button is Search Transactions, and opens the search flyout.
Account settings, messages, and help topics are accessed from icon buttons in the third and fourth positions on the right of the Product Header.