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.

Masthead

height: 400px;

width: 1093px;

border-radius: ;

border: 1px #000000;

background: #0073e7;

opacity: 1;

color: #010101;

Primary Tabs

height: 56px;

width: 334px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #010101;

Secondary Tabs

height: 48px;

width: 270px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 48px;

width: 270px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Side Menu

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, which can include as many sub-categories as needed.

Navigation Left

height: 639px;

width: 240px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Navigation Collapsable

height: 570px;

width: 64px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

height: 570px;

width: 256px;

border-radius: ;

border: px #000000;

background: #000000;

opacity: 1;

color: ;

Navigation FilterΒ 

height: 607px;

width: 240px;

border-radius: ;

border: 1px #000000;

background: #ffffff;

opacity: 1;

color: #000000;

Breadcrumbs

Breadcrumbs

height: 40px;

width: 240px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

height: 40px;

width: 240px;

border-radius: ;

border: 1px #000000;

background: #000000;

opacity: 1;

color: #000000;

Questions? Drop us a line

helloux@microfocus.com

Β© Copyright 2021 Micro Focus or one of its affiliates