UI Components

Masthead Structure

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.

Two-level Navigation

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.

Family Colors on Mastheads

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