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 flow actions.

Jump to:

Use 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 drop-down menus within a Nintex Apps page that are connected to a broad range of actions with Action flows.

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

  1. Add a Navigation component to a Nintex Apps page.
  2. Format the Navigation component.
  3. 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 Remove.
    • (Optional) Configure items by clicking them and then editing in the Navigation Properties pane.

Add actions to individual navigation items

  1. Select a navigation item in the canvas and click the Actions tab.

  2. Click add Add action to add a new action. This defaults to the Go to URL action.

  3. 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 the Run component action.

  • Expand sub-navigation: Expands all necessary navigation menus to highlight the selected navigation item. This is useful for showing deeply nested items, as it can highlight any item at any level.

    • Item: The navigation item to expand to.

  • Select navigation: Simulates a user clicking the selected navigation item, triggering the actions associated with it.
    • Item: The navigation item to select.

Properties

Component properties

  • Unique Id: (Required) Nintex Apps automatically generates an alphanumeric ID for the component; if preferred, give it a practical name.

  • 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 dropdown.

    Note: 

    • To refresh available style variant options, click Refresh style variants.

    • This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • Item source: Choose the source of navigation menu items.

    • Nintex Apps:
      • Manual
      • User menu
      • 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.

  • Allow HTML: When toggled on, any HTML markup within the navigation item labels will be parsed and rendered per the markup.
    Note: 

    While using custom HTML can allow for powerful customizations, it can come with risks. Custom HTML can result in unexpected behaviors. If you do use custom HTML, test your pages thoroughly in a sandbox environment after each Nintex Apps update.

  • Type: Controls the visual orientation of the Navigation component.

    • Horizontal: Navigation items align in a straight line from left to right.

      • Overflow to menu navigation: If toggled on, any navigation items that do not fit within the horizontal navigation—based on screen size—will be placed into a drop-down menu.
      • Screen size to collapse item text:
        • Never: The navigation component will not respond to screen size.
        • Tablets and smaller: Navigation will respond to widths of 1024 pixels or smaller.
        • Phones: Navigation will respond to widths of 480 pixels or smaller.
      • Alternate format: Available if Screen size to change format is set to either Tablets and smaller or Phones.
        • Collapse to menu: The horizontal list will transform into a drop-down menu at the set screen size.
        • Wrap centered: The horizontal list will transform into a vertical menu at the set screen size, with navigation items centered in the navigation menu.
      • Menu Icon: (Optional) Select the drop-down menu icon.

    • Dropdown: All navigation items are collapsed into a drop-down menu indicated by a down arrow.

      • Label: Creates a custom label for the collapsed drop-down menu. This property is compatible with merge syntax.

        Note:  If the item source selected is Apps, the navigation defaults to the first app listed. To change the label, insert a custom value for the label.

      • Use menu icon: If toggled on, an icon will display beside items in the dropdown.

      • Dropdown icon: (Optional) Select the drop-down menu icon.

  • 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.

    Margins must be set using spacing variables defined in the design system. Custom or arbitrary values are not allowed. For more information, see Spacing.

Standard display logic options are available to display or hide the component or feature.

Nested elements

These properties control the behavior and look of the individual navigation items within the Navigation component.

  • Unique Id (Required) Nintex Apps automatically generates an alphanumeric ID for the navigation item; if preferred, give it a practical name.

  • 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 dropdown.

    Note: 

    • To refresh available style variant options, click Refresh style variants.

    • This is useful for when changes to the design system (like style variants or variable options) have been made in another browser window or by another user.

  • 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. This property is compatible with merge syntax.
  • 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.

Customize the actions taken when an end user clicks a navigation item.

  • Add menu: Adds a navigation menu when a user hovers over the item.

  • Click: Select what occurs when the navigation item is clicked.

    • Go to URL: (Default) When clicked, a URL is opened. You can change the property, Associated URL, and Open URL.

      • URL: The URL that is opened. This property is compatible with merge syntax.

      • Open URL in: Select to open the URL in the Current window, a Blank window, or the Parent window.

    • Run action flow: Click Add, then select:

      • Add action flow: Uses action flows to launch actions.

      • Show menu: Displays a drop-down menu to the current component or mouse position. For more information, see Show/hide menu.