Masthead

The Masthead component helps to differentiate between the top hierarchy functions and the content below it.

The Masthead is a type of toolbar used for primary actions, such as navigation and search, and secondary actions, such as user profile actions or application setting actions. These actions can be found by using the icons on the right side of the Masthead. All of the icons on top of the Masthead should be the same color.

The top-level navigation may be presented as a tab navigation component or as a pull-down menu component.

In the case of second-level navigation, the top-level navigation will be aligned to the left and the sub-navigation menu will appear underneath, aligned to the center.

The product acronym icon on the left side of the Masthead, upon the background color, will reflect the product’s family.