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.
The side navigation pane should be used as second or third level navigation when the sub-navigation includes too many items.
On complex navigation systems we can use the hierarchical tree, that can include as many sub-categories as needed.
The filters panel can include controls such as:
- Search field
- Radio buttons (used for lists of up to 6 elements)
- Drop down menus