Navigation
The Navigation component lets you build custom navigation menus with horizontal or vertical orientation. Menu items can be organized into groups and configured with icons, labels, and visibility rules. It fits well for scenarios like a top navigation bar across pages of an internal tool, a sidebar for an admin dashboard, or a bottom navigation menu in a mobile app.
Content​
The Content section lists the navigation entries displayed in the component.
Adding Items and Groups​
Click + New menu item to open a dropdown with two options: Add new menu item to add a standalone entry, or Add new group to add a group that can hold child items. Items and groups can be reordered by dragging.
Item Properties​
Click any item or group to open its settings:
| Property | Description | Expected Value |
|---|---|---|
| Label | Text displayed for the menu item. | String (e.g., Dashboard). Supports {{ expressions. |
| Id | Unique ID of the item. Used by selectItem(), setItemVisibility() and setItemDisable(). | String (e.g., item1). Must be unique. |
| Caption | Optional description for a menu item. Shown as a tooltip on top-level items in horizontal orientation, and as text below the label otherwise. | String. |
| Icon | Icon shown alongside the label. | Icon name (e.g., IconArchive). Toggle icon visibility with the eye icon. |
| Hide this item | Hides the item from the rendered navigation. | Enable/disable the toggle or click fx to enter a logical expression. |
| Disable item | Prevents interaction with the item. | Enable/disable the toggle or click fx to enter a logical expression. |
Each menu item also has its own On click event section, which runs before the component's On click event. Groups have Label, Id, Icon, Hide this item and Disable item, but no Caption or events. Child items can be added from inside the group's settings.
A group is shown only when at least one of its child items is visible, so hiding every child item also hides the group. In horizontal orientation, clicking a group opens its child items in a dropdown. In vertical orientation, groups start collapsed and expand or collapse when you click the group header. Selecting an item, by clicking it or with selectItem(), expands that item's group and collapses the other groups; selecting a top-level item collapses all groups. A disabled group can't be opened, and selectItem() ignores group IDs.
Events​
| Event | Description |
|---|---|
| On click | Triggers whenever the user clicks a navigation item. |
Check the Action Reference docs to get detailed information about all the Actions.
Component Specific Actions (CSA)​
The following actions of the Navigation component can be controlled using component-specific actions (CSA). You can trigger them using an event or a RunJS query.
Action | Description | How To Access |
|---|---|---|
| setVisibility() | Sets the visibility of the component. | components.navigation1.setVisibility(false) |
| setDisable() | Enables or disables the component. | components.navigation1.setDisable(true) |
| setLoading() | Sets the loading state of the component. | components.navigation1.setLoading(true) |
| selectItem() | Programmatically selects a menu item by its ID. | components.navigation1.selectItem('item1') |
| setItemVisibility() | Shows or hides a specific menu item or group by its ID. Pass true to show and false to hide. | components.navigation1.setItemVisibility('item1', false) |
| setItemDisable() | Enables or disables a specific menu item or group by its ID. Pass true to disable. | components.navigation1.setItemDisable('item1', true) |
Exposed Variables​
Variable | Description | How To Access |
|---|---|---|
| selectedItem | The currently selected item as an object with id, label, groupId and groupLabel. groupId and groupLabel are null for a top-level item. null until an item is selected. | {{components.navigation1.selectedItem}} |
| previousSelectedItem | The previously selected item, in the same shape as selectedItem. | {{components.navigation1.previousSelectedItem}} |
| isVisible | Indicates if the component is visible. | {{components.navigation1.isVisible}} |
| isDisabled | Indicates if the component is disabled. | {{components.navigation1.isDisabled}} |
| isLoading | Indicates if the component is in a loading state. | {{components.navigation1.isLoading}} |
Additional Actions​
Action | Description | Configuration Options |
|---|---|---|
| Loading state | Enables a loading spinner on the component. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Visibility | Controls component visibility. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Dynamic height | Automatically adjusts the component's height based on its content. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Collapse when hidden | Collapses the component's space when it is hidden, so surrounding components fill the space. Takes effect when the app runs (preview or released app), not on the editor canvas. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Disable | Enables or disables the component. | Enable/disable the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Devices​
Property | Description | Expected Value |
|---|---|---|
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on fx and entering a logical expression. |
Styles​
Nav menu item​
Property | Description | Configuration Options |
|---|---|---|
| Text | Color of the label for unselected items. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Icon | Color of the icon for unselected items. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Hover pill background | Background color of the pill when an item is hovered. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Selected text | Color of the label for the active/selected item. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Selected icon | Color of the icon for the active/selected item. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Selected pill background | Background color of the pill for the active/selected item. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Pill border radius | Corner radius of the selection pill. | Enter a number (default: 6) or click on fx and enter a code that programmatically returns a numeric value. |
| Orientation | Sets the layout direction of the menu. | Horizontal (default) or Vertical. |
| Style | Controls what each nav item displays. | Text and icon (default), Text only, or Icon only. |
| Nav item size | Determines how items fill the available width. | Auto sizes items to their content; Equal width (default) distributes space evenly. |
| Alignment | Horizontal and vertical alignment of items within the navigation. | Left (default), Center, or Right, plus the vertical alignment icons Top, Center (default) or Bottom. |
| Sub menu alignment | Horizontal alignment of child items inside a group: the dropdown in horizontal orientation, the expanded group in vertical orientation. | Choose the Left, Center or Right icon. Not set by default, so child items follow the group's alignment. |
Container​
Property | Description | Configuration Options |
|---|---|---|
| Background | Background color of the navigation container. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Border | Border color of the navigation container. | Select the color or click on fx and input code that programmatically returns a Hex color code. |
| Border radius | Corner radius of the navigation container. | Enter a number (default: 8) or click on fx and enter a code that programmatically returns a numeric value. |
| Padding | Inner padding of the navigation container. | Enter a number (default: 2) or click on fx and enter a code that programmatically returns a numeric value. |
Advanced​
Property | Description | Configuration Options |
|---|---|---|
| CSS class | Adds a custom CSS class to the component, which can be targeted using Custom Styles for advanced styling. | Enter one or more class names. |
The Advanced section is available only if your plan has the Custom Styles feature enabled.