i4designer Knowledgebase

Navigation menu

Abstract

Open this article to learn more details about the Navigation menu control of the i4designer set up on i4SCADA platform.

The i4deisgner Navigation menu component is the frame in which the navigation pages (or SubPages) are displayed. The Navigation menu component is the parent of one or more navigation pages. A navigation page can be added only if this component is placed on the page and selected.

Navigation_menu.jpg

The Navigation menu component

Category

Property

Description

Navigation

Navigation file

Sets the navigation structure to be displayed by the menu. The navigation structure can be either directly typed in the designated field, or selected from the navigation tree, enabled by clicking the Open file explorer button.

Navigation_file.jpg

Upon navigation structure selection, the component will be updated accordingly.

Navigation_file_added.jpg

Layout

Orientation

Sets the orientation of the menu to vertical or horizontal. The user can select the orientation from the options available in the designated drop-down list.

Orientation.jpg

Reverse

Reverses the menu orientation from left to right, by toggling the switch from True to False.

reverse.jpg

Breakpoint

Sets the width in pixels, in order to change the menu layout to mobile view. The default value can be increased or decreased, either by manually typing in the desired value, or by using the up and down arrows.

Breakpoint.jpg

Palette

Background color

Sets the background color of the menu component. The user can either manually type in the HEX color code or use the color picker tool.

Background_color.jpg

Separate color

Sets the color of the link separators. The user can either manually type in the HEX color code or use the color picker tool.

Separator_color.jpg

Appearance

Text alignment

Sets the text alignment of the menu links, selecting from the drop-down list options: Left, Center and Right.

Text_alignment.jpg

Padding

Sets the pixels for the navigation menu padding, hence defining the space between its contents and its border. The padding value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

Padding.jpg

Link padding

Sets the pixels for the menu links padding, hence defining the space between the link contents and the link border. The Link padding value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

Link_padding.jpg

Icon

Icon padding

Sets the menu links icons padding, hence defining the space between the menu links icons and their border. The Menu links icons value can be either manually typed in the designated field or increased/decreased by clicking the up and down arrows.

icon_padding.jpg

Icon position

Sets the position of the menu links icons, selecting from the drop-down list options: left or top.

Icon_position.jpg

Icon size

Sets the size of the menu links icons, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Icon_size.jpg

Typography

Font size

Sets the size of the menu links font, using the up and down arrows to increase and decrease, or by manually typing the desired value.

Font_size.jpg

Font weight

Sets the weight of the menu links font, selecting from the drop-down list options: normal, 900 (fat), 800 (extra-bold), 700 (bold), 600 (semi-bold), 500 (medium), 400 (regular), 300 (light), 200 (extra-light) and 100 (thin).

Font_weight.jpg

Transform

Width

Sets the width of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component width can also be adjusted directly on the design surface by means of mouse manipulation.

Control_width.jpg

Height

Sets the height of the component using the up and down arrows to increase and decrease, or by manually typing the desired pixels value.

The component height can also be adjusted directly on the design surface by means of mouse manipulation.

Control_height.jpg

Angle

Sets the rotation angle using the up and down arrows to increase and decrease, or by manually typing the desired degree value.

The component angle can also be adjusted directly on the design surface by means of mouse manipulation.

Angle_degree.jpg

Left

Specifies the X (horizontal) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component X coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

X_coordinates.jpg

Top

Specifies the Y (vertical) coordinate of the component, on the grid, using the up and down arrows to increase and decrease, or by manually typing the desired value.

The component Y coordinate can also be adjusted directly on the design surface by means of mouse manipulation.

Y_cordinates.jpg