In This Section
- <no title>
- <no title>
- Guides
- Tutorials
- Skuid Page Tutorials
- Add Related Lists with the Table Component
- Build an Activities Related List Tab
- Build a Custom “Create New Record” Page
- Build a Custom Detail Page
- Build a Custom List Page
- Compose a Branded Header and Navigation
- Compose a One-Page App Using Tab Actions and Conditional Rendering
- Conditionally Display Fields
- Create a Custom Clone Page
- Create a Custom “Clone Account” page
- Highlight Critical Data: Wrappers, Rich Text, and Ui-Only Fields
- Mass Create Records
- Show Products in an Opportunity Page
- Skuid Pages for standard Salesforce CRM
- Salesforce Tutorials
- Add Product Line Items to Opportunities with a Popup
- Add Gmail to Salesforce functionality in your email fields
- Create a Custom Edit Page and Set Visualforce Overrides
- Getting Help: Grant Skuid Login Rights to your Org
- Reclaim the Salesforce Home Page
- Redirect to Salesforce Processes
- Skuid for Sales: A Turn-Key Template to Augment Lightning Sales Cloud
- JavaScript Tutorials
- Skuid Page Tutorials
- Legal terms and conditions
- API Reference
- skuid.runtime
- skuid.$
- skuid.actions
- skuid.ajax
- skuid.builder.core
- skuid.builder.core.coreProps
- skuid.calendar
- skuid.collaboration
- skuid.component
- skuid.componentType
- skuid.events
- skuid.formula
- skuid.hotkeys
- skuid.label
- skuid.load
- skuid.model
- skuid.model.Model
- skuid.mustache
- skuid.page
- skuid.sfdc
- skuid.snippet
- skuid.time
- skuid.utils
- skuid.version
- Component-Specific APIs
- Skuid Model Metadata Object
- Skuid Model Child Relationship Metadata Object
- Skuid Model Condition Metadata Object
- Skuid Model Field Metadata Object
- Skuid Model Record Type Metadata Object
- skuid.runtime
In This Topic
Navigation¶
The Navigation component is a layout component used to create custom navigation items that allow end users to navigate Skuid 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 Skuid page that are connected to a broad range of actions with the Action Framework.
Manually Add Items to the Navigation¶
- Drag and drop the Navigation component into a Skuid page.
- Format the Navigation component according to layout and orientation requirements.
- Click the Navigation component in the canvas, then click add to add new navigation items; rename them in the property pane.
- To remove an item, click the trash can.
- 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 Actions 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.
Properties¶
Navigation Properties¶
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.
- Skuid Platform:
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.
Navigation Item Properties¶
These properties control the behavior and look of the individual navigation items within the Navigation component.
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.