Navigation¶

Add actions to individual navigation items¶

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

2. Click fa-plus-circle 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.

Basic tab [[]]¶

• 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 true, any navigation items that do not fit within the horizontal navigation—based on screen size—will be placed into a dropdown menu.
    • Screen Size to Change Format:
      • 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 dropdown menu type 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: Select the icon of the drop down menu (optional).

  • Vertical: Navigation items appear as a list, in straight line up to down.

    

    • Screen Size to Collapse Item Text: At the selected screen size, navigation items will only display their selected icon without the explanatory text.
      • None (default)
      • Tablets and smaller: Navigation will respond to widths of 1024 pixels or smaller.
      • Phones: Navigation will respond to widths of 480 pixels or smaller.
    • Allow User to Expand or Collapse with a Toggle: This adds an icon that end users can click to hide the vertical list of navigation items.

  • Drop Down: All navigation items are collapsed into a dropdown menu indicated by a down arrow.

    

    • Use Icon: If true, an icon will display beside items in the drop down.

    • Label: Creates a custom label for the collapsed dropdown menu.

      Note

      If the item source selected is Salesforce Apps, the Navigation defaults to the first app listed. To change the label, insert a custom value for the Label Property.

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

  • Skuid Platform:
    • Manual
    • User Menu
    • Apps
  • Skuid on 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.

• Scroll Tall Drop Downs: If true, scrolling will be enabled within dropdowns that are taller than 50% of the browser window.

Advanced tab [[]]¶

• Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
• CSS Class (optional): Assign a CSS class to the component’s DOM element.

Styles tab [[]]¶

You can add custom CSS values to change the appearance of the NAvigation component..

• Click fa-plus-circle Add New Custom Attribute and enter:
  • Custom CSS property
  • Custom CSS value

Need to remove a custom style attribute? Click fa-times-circle next to the newly-added attribute.

Display Logic tab [[]]¶

Standard conditional rendering options are available.

Basic 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): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.
• CSS Class (optional): Assign a CSS class to the component’s DOM element.

Actions tab [[]]¶

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

• Convert existing actions into an action sequence by clicking fa-sitemap.

• Add actions by clicking fa-plus-circle.

  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.

Display Logic tab [[]]¶

Standard conditional rendering options are available.