Navigation¶

Add actions to individual navigation items¶

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

2. Click add Add Actions 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 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 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).

  • 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 item source selected is Salesforce Apps, the Navigation defaults to 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.

Advanced tab [[]]¶

• Unique Id (optional): Skuid automatically generates an alphanumeric Id for the component; if preferred, give it a practical name.

Styles tab [[]]¶

Global styles for this component are set in the Design System Studio. The following Style properties can be adjusted for an individual page.

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

• Spacing: Sets the spacing of the Header relative to other components on the page. Spacing can be managed for Top Margin, Bottom Margin, Left Margin, Right Margin. All margins can be set to one of the following:

  • None
  • Extra Small
  • Small
  • Reduced
  • Regular
  • Increased
  • Large
  • Extra Large
  • Huge

  Note

  These sizes are relative to one another; the baseline is determined by Design System settings.

Display Logic tab [[]]¶

Standard display logic 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 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 navigation item; if preferred, give it a practical name.

Actions tab [[]]¶

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

• Convert existing actions into an action sequence by clicking.

• Add actions by clicking.

  Note

  Navigation items default to the Go to URL Action Type, but this property, Associated URL, and Open URL in can be changed in 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, Skuid 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 [[]]¶

Standard display logic options are available.