Nav

The nav object is a navigation menu that allows users to navigate between pages or to perform actions.

It can be used to create a navigation bar, a menu, or a toolbar.

It can contain buttons, groups, sub menus and more.

Project navigation recipe

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dynamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

"mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

This attribute is available when side is "none".

When side is "none", this attribute defaults to x0y0.

Flex Grow

Specifies if the objects should grow to fill the available space.

Attribute Values

Value	Description
false	Default value. Objects do not grow to fill the available space.
true	Objects expand to fill the available space.

This attribute is available when side is "none".

The default value is: false.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

Attribute Values

Value	Description
false	Default value. Objects do not shrink to fit the available space.
true	Objects shrink to fit the available space.

This attribute is available when side is "none".

The default value is: false.

Column

Specifies the starting column of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column index starting from 1.

This attribute is available when side is "none".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Column Span

Specifies how many grid columns the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column span starting from 1.

This attribute is available when side is "none".

When side is "none", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row

Specifies the starting row of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
[empty]	Auto placement by the grid.
<int>	Row index starting from 1.

This attribute is available when side is "none".

When side is "none", this attribute defaults to auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row Span

Specifies how many grid rows the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Row span starting from 1.

This attribute is available when side is "none".

When side is "none", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Width

Sets the object's width in pixels.

This attribute is available when side is one of "none", "left", or "right".

Minimum width is 100 when side is "top" or side is "bottom" or orientation is "horizontal".

Minimum width is 40 when side is "left" or side is "right" or orientation is "vertical".

Height

Sets the object's height in pixels.

This attribute is available when side is one of "none", "top", or "bottom".

Minimum height is 40 when side is "top" or side is "bottom" or orientation is "horizontal".

Minimum height is 100 when side is "left" or side is "right" or orientation is "vertical".

Size

Size Open

Specifies the size of the nav when open.

Attribute Values

Value	Description
<int>	Width or height (depending on orientation) in number of pixels.

This attribute is available when mode is "drawer".

Layout

Mode

Specifies the nav's mode, which affects how it appears and is positioned.

In "drawer" mode, nav has closed/open states, which can be controlled with a hamburger button, defined in the Items attribute. When closed the nav is narrower and buttons appear without labels. When it's opened it expands up to the width or height specified in the Size Open attribute. The push attribute specifies if the content of the page is pushed aside when opening.

The "offscreen" mode is similar to drawer, but when closed the nav is completely hidden. Use a separate page control to set Open to true; a drawer button inside the nav can close it while it is visible.

Attribute Values

Value	Description
static	Default value. Static position.
drawer	Drawer mode.
offscreen	Offscreen mode.

The default value is: static.

Side

Specifies which sides the nav is aligned to.

Attribute Values

Value	Description
none	Default value. Use the configured position.
left	Stick to the left side.
right	Stick to the right side.
top	Stick to the top side.
bottom	Stick to the bottom side.

When mode is one of "drawer" or "offscreen", this attribute defaults to left.

Orientation

Specifies the nav orientation.

Attribute Values

Value	Description
horizontal	Default value. Horizontal.
vertical	Vertical.

This attribute is available when side is "none".

The default value is: horizontal.

Items

Items

Specifies the nav's items.

Attribute Values

Value	Description	Example
<JSON array>	Description of the nav's content.	[{"type":"button","label":"Home","action":"link","link":"home"}]

When mode is one of "drawer" or "offscreen", this attribute defaults to [{"type":"drawer-button"}].

Drawer

Open

Specifies if the nav is open. Toggle this value to show/hide the nav.

Attribute Values

Value	Description
false	Default value. Nav is closed.
true	Nav is opened.

This attribute is available when mode is one of "drawer" or "offscreen".

The default value is: false.

Push

If true, pushes the page's content out of the way when opening.

Attribute Values

Value	Description
true	Default value. Pushes the page's content.
false	Opens on top of the page's content.

This attribute is available when mode is "drawer" or (mode is "offscreen" and side is not "none").

When mode is "drawer" or (mode is "offscreen" and side is not "none"), this attribute defaults to true.

Close On Select

Specifies if selecting a drawer menu item closes it (if it's currently open).

Attribute Values

Value	Description
true	Default value. When the user clicks a menu item, it closes.
false	The drawer must be closed manually with the hamburger button or by setting the open attribute.

This attribute is available when mode is one of "drawer" or "offscreen".

When mode is one of "drawer" or "offscreen", this attribute defaults to true.

Style

Panel

Shows a panel that frames the object. Its style can be modified.

Attribute Values

Value	Description
true	Default value. Shows the panel.
false	Hides the panel.

The default value is: true.

Panel Color

Specifies the panel color.

Attribute Values

Value	Description
default	Default color.
primary	Primary color, used to highlight important areas.
warning	Warning color, used to highlight warning areas.
success	Success color, used to highlight success areas.
error	Error color, used to highlight error areas.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

This attribute is available when panel is "true".

When panel is "true", this attribute defaults to true.

Panel Custom Color

Specifies the panel custom color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when panelstyle is "custom" or panelstyle is "glass" or panelcolor is "custom".

When panelstyle is "custom" or panelstyle is "glass" or panelcolor is "custom", this attribute defaults to true.

Gap

Specifies the space between the nav's buttons.

Attribute Values

Value	Description
auto	Default value. None between clear buttons; otherwise 8 pixels in a vertical nav and 4 in a horizontal one.
<int>	Gap in pixels.

The default value is: auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Padding

Specifies the space between the edges of the nav and its buttons. It can't be smaller than half the gap.

Attribute Values

Value	Description	Example
auto	Default value. 8 pixels with a panel, or 4 around the filled, outlined and glass buttons of a horizontal nav; clear buttons reach the panel's edges across the nav, unless highlighted with a fill. None without a panel.
<int>	Padding in pixels for all sides.
<top> <right> <bottom> <left>	Padding in pixels for each side.	10 20 30 40

This attribute is available when mode is not "drawer".

When mode is not "drawer", this attribute defaults to auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Icon Size

Specifies the icon size.

Attribute Values

Value	Description
<int>	Icon size in pixels.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Button Min Height

Specifies the minimum height of the buttons in a vertical nav; buttons with taller content grow to fit it.

Attribute Values

Value	Description
<int>	Height in pixels.

This attribute is available when side is "left" or side is "right" or (side is "none" and ((orientation is "vertical" or mode is "offscreen"))).

When side is "left" or side is "right" or (side is "none" and ((orientation is "vertical" or mode is "offscreen"))), this attribute defaults to 48.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Button Color

Specifies the button color.

Attribute Values

Value	Description
default	Default value. Default color.
primary	Primary color, used to highlight action buttons.
warning	Warning color, used to highlight warning buttons.
success	Success color, used to highlight success buttons.
error	Error color, used to highlight error buttons.
light	Light color.
dark	Dark color.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

The default value is: default.

Button Custom Color

Specifies the button's custom color.

Attribute Values

Value	Description
<html color>	Any valid HTML color.

This attribute is available when buttonstyle is "custom" or buttonstyle is "glass" or buttoncolor is "custom".

When buttonstyle is "custom" or buttonstyle is "glass" or buttoncolor is "custom", this attribute defaults to clear.

Button Look

Specifies the button's look.

Attribute Values

Value	Description
filled	Filled look, with a solid background.
clear	Default value. Clear look, no background or border.
outlined	Outlined look, with a solid border.
glass	Glass look, with a semi-transparent background.

The default value is: clear.

Button Icon Position

Specifies the position of the button's primary icon.

Attribute Values

Value	Description
left	Default value. Left.
top	Top.

The default value is: left.

Button Section Icon Position

Specifies the position of the button's primary icon inside a section.

Attribute Values

Value	Description
left	Default value. Left.
top	Top.

This attribute is available when items contains ""section".

The default value is: left.

Highlight Mode

Specifies the way selected buttons are highlighted.

Attribute Values

Value	Description
border	Default value. Border highlight.
fill	Filled button highlight.
dot	Dot highlight.

The default value is: border.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Typography

Font Family

Specifies the font family.

The default value is: default.

Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

The default value is: 14.

Font Color

Specifies the text CSS color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Font Weight

Specifies the weight of the font.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

The default value is: normal.

Italic

Show the text in italics.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

The default value is: false.

Small Caps

Sets the font to small caps.

Attribute Values

Value	Description
false	Default value. Normal.
true	Small caps.

The default value is: false.

Decoration

Specifies the text decoration.

Attribute Values

Value	Description
none	Default value. No decoration.
underline	Underline.
overline	Overline.
line-through	Line through.

The default value is: none.

Line Height

Sets the line height of the text.

Attribute Values

Value	Description
<float>	Specify the line height as a multiple of the font size.

The default value is: 1.0.

Text Align

Sets the horizontal alignment of the text.

Attribute Values

Value	Description
left	Default value. Left alignment.
right	Right alignment.
center	Center alignment.

This attribute is available when side is "left" or side is "right" or (side is "none" and ((orientation is "vertical" or mode is "offscreen"))).

When side is "left" or side is "right" or (side is "none" and ((orientation is "vertical" or mode is "offscreen"))), this attribute defaults to left.

Popup Menu Typography

Popup Font Family

Specifies the font family.

The default value is: default.

Popup Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

The default value is: 14.

Popup Font Color

Specifies the text CSS color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Popup Font Weight

Specifies the weight of the font.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

The default value is: normal.

Popup Italic

Show the text in italics.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

The default value is: false.

Popup Small Caps

Sets the font to small caps.

Attribute Values

Value	Description
false	Default value. Normal.
true	Small caps.

The default value is: false.

Popup Decoration

Specifies the text decoration.

Attribute Values

Value	Description
none	Default value. No decoration.
underline	Underline.
overline	Overline.
line-through	Line through.

The default value is: none.

Popup Line Height

Sets the line height of the text.

Attribute Values

Value	Description
<float>	Specify the line height as a multiple of the font size.

The default value is: 1.0.

View

Visible

Sets the object's visibility.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

The default value is: true.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

The default value is: true.

Blink

Blinks the object at the specified speed.

Attribute Values

Value	Description
false	Default value. Not blinking.
slow	Blinks slowly.
fast	Blinks fast.

The default value is: false.

Transition

Specifies the transition effect when the object is shown or hidden.

Attribute Values

Value	Description
none	Default value. No transition.
fade	Fade in/out.
fade-left	Slide from left and fade in/out.
fade-right	Slide from right and fade in/out.
fade-up	Slide from top and fade in/out.
fade-down	Slide from bottom and fade in/out.
slide-left	Slide from left.
slide-right	Slide from right.
slide-up	Slide from top.
slide-down	Slide from bottom.
zoom-in	Zoom in.
zoom-out	Zoom out.
3d-flip-left	3D flip from left.
3d-flip-right	3D flip from right.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Duration

Specifies the transition duration in milliseconds.

Attribute Values

Value	Description
<integer>	Duration in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Delay

Specifies the transition delay in milliseconds.

Attribute Values

Value	Description
<integer>	Delay in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

Attribute Values

Value	Description
0	The object is fully transparent.
>0.0, <1.0	The object is translucent (content behind the element can be seen).
1.0	Default value. The object is fully opaque.

The default value is: 1.0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

Attribute Values

Value	Description	Example
<int>	Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>	Specify the margin in pixels for each side of the object.	10 20 30 40

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

Attribute Values

Value	Description
<float>	Specify the scale for both width and height of the object.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.