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.

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


Primary Tabs

Secondary Tabs

Side Menu

The side navigation pane should be used as second or third level navigation when the sub-navigation includes too many items.

Hierarchical Tree

On complex navigation systems we can use the hierarchical tree, that can include as many sub-categories as needed.

Filters Panel

The filters panel can include controls such as:

  • Search field
  • Checkboxes
  • Radio buttons (used for lists of up to 6 elements)
  • Sliders
  • Drop down menus


Drop us a line

ยฉ Copyright 2021 Micro Focus or one of its affiliates

Contributeย  |ย  Updates