Navigation
The Navigation component is a layout component used to create custom navigation items that allow end users to navigate apps, go to different web pages, or perform Action Framework actions.
Using the Navigation Component
Navigation is a vital element of a user interface and can guide users through an app, as well as any necessary workflow actions, more efficiently. Use the Navigation component to build custom navigation bars that are intuitive and tailored to unique processes.
In addition to facilitating traditional navigations, the Navigation component can be used to build handy dropdown menus within a Nintex Apps page that are connected to a broad range of actions with the Action Framework.
Important: If using the Navigation component within your Nintex Apps pages, the Item Source property must be set to Manual. All other source options will result in errors within Salesforce communities.
Manually Add Items to the Navigation
- Add a Navigation component to a Nintex Apps page.
- Format the Navigation component.
- Add navigation items to the component: Click the component in the canvas, then click Add nav item; rename the new navigation item in the property pane.
- To remove an item, click delete Remove.
- Configure items by clicking them, then editing in the Navigation Properties pane. ( Optional )
Add actions to individual navigation items
-
Select a navigation item in the canvas and click the Actions tab.
-
Click add Add action to add a new action. (This defaults to the Go to URL action.).
-
Select the appropriate action and adjust preferences as necessary.
Note: Multiple actions may be added to a single menu item. Be mindful of actions that may interfere with each other.
Component actions
Component actions are available using Run component action.
Expand sub-navigation
Expands all necessary navigation menus to highlight the selected navigation item. This action is useful for displaying deeply nested items, as it can highlight any item, no matter how deeply nested.
- Item: The navigation item to expand to.
Select navigation
Emulates an end user's click on the selected navigation item, causing whatever actions associated with that navigation item to trigger.
- Item: The navigation item to select.
Properties
Component properties
General tab
-
Type: Controls the visual orientation of the Navigation component.
-
Item source: Choose the source of navigation menu items.
- Nintex Apps:
- Nintex Apps for Salesforce:
- Manual
- Salesforce tabs for current app
- Salesforce apps
- Salesforce apps with tabs
- Salesforce user menu
Note: Other than Manual, all options automatically populate menu items.
Advanced tab
- Unique ID (optional): Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.
Styles tab
-
Style variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Nintex Apps builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style variant drop-down menu.
-
Margins: Sets a component's margin (the space around it) relative to other components on the page.
- To set margins for all sides, click
All. - To set margins for each side individually, click
Separate.
Margin values can be set to any configured spacing variable for the page's design system. Margin cannot be set an arbitrary value; it must use a design system variable.
Nested elements
Navigation item properties
These properties control the behavior and look of the individual navigation items within the Navigation component.
General tab
- Label: The text that appears within each navigation item. Used to indicate where the navigation item will take the end user or what the item will do when clicked.
- Icon: A unique visual element that appears next to each navigation item. Used to indicate where the navigation item will take the end user or what the item will do when clicked..
- Unique ID ( optional ): Nintex Apps automatically generates an alphanumeric ID for the navigation item; if preferred, give it a practical name.
Actions tab
Customize the actions taken when an end user clicks a navigation item:
Click add Add action, then select:
Note: Navigation items default to the Go to URL Action Type, but this property, Associated URL, and Open URL in can be changed in the Properties pane.
Styles Tab
- Style Variant: Style variants are created and set in the Design System Studio. Some components have pre-defined variants for a specific aspect of a component's style. Also, Nintex Apps Builders can style and customize elements to create their own themes within the DSS. These themes will dynamically populate as selectable values in the Style Variant dropdown menu.
Display logic tab
Note: For information on individual condition properties, see the Display Logic docs.
Render conditions
These conditions govern when an element or component will display.
-
Render if...: The conditions that must be met to enable the element's display.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
- Condition logic: The custom logic for grouping and applying one or more conditions.
-
If hidden, model field changes should be: ( only available on Field rendering tabs ) If the field is hidden by conditional rendering, this property determines whether any changes made to this field (via an action flow or JavaScript) are saved in the model, or canceled.
Note: Updating fields without direct user input can lead to poor user experience, especially when the user may be unaware that field changes are occuring.
- Retained in model ( the default)
- Cancelled
Enable conditions
These conditions govern when a displayed element may or may not be enabled for use.
- Enable if...: The model conditions that must be met to enable the field's editing.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
- Condition logic: The custom logic for grouping and applying one or more conditions.
- Message to show when disabled: A brief explanation for why the field is disabled.
Selected conditions
These conditions govern when a navigation item displays with "selected" styling.
Style variant conditions
These conditions govern which style variant is applied and displayed on a component or element.
Note:
You can create one, or more, style variant conditions and set each individually.
- Click Add a new condition to add a new style variant condition.
- C lick the new style variant condition and configure.
When Nintex Apps executes the display logic, the style variant conditions are evaluated in order.
Render conditions
These conditions govern when an element or component will display.
-
Render if...: The conditions that must be met to enable the element's display.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
- Condition logic: The custom logic for grouping and applying one or more conditions.
-
If hidden, model field changes should be: ( only available on Field rendering tabs ) If the field is hidden by conditional rendering, this property determines whether any changes made to this field (via an action flow or JavaScript) are saved in the model, or canceled.
Note: Updating fields without direct user input can lead to poor user experience, especially when the user may be unaware that field changes are occuring.
- Retained in model ( the default)
- Cancelled
Enable conditions
These conditions govern when a displayed element may or may not be enabled for use.
- Enable if...: The model conditions that must be met to enable the field's editing.
- ALL conditions are met
- ANY conditions are met
- Custom logic is met
- Condition logic: The custom logic for grouping and applying one or more conditions.
- Message to show when disabled: A brief explanation for why the field is disabled.
Selected conditions
These conditions govern when a navigation item displays with "selected" styling.