In This Section
- Concepts
- Data
- Build
- The App Composer
- The Page Index
- Context
- Pages
- Models
- Components
- Best Practices
- Debugging Skuid in the Console
- Logic
- Style
- Deploy
- Extend
- Reference
- The Property Library
- API Reference
- skuid.debug
- 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.lightning
- 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
- Page XML API
- skuid-sfdx
- skuid CLI
- Skuid Metadata Object Reference
- Skuid Glossary
- Formula and Function Reference
- Open Source Software Attributions
- Site Administration
- Tutorials
- Legal terms and conditions
- Skuid for Salesforce Evaluation Guide
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.
Warning
If using the Navigation component within your Skuid 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 Skuid 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.
Properties¶
(Just need to look up a property? Try going directly to the Property Library.)
Navigation Properties¶
General 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 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.
- 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 component relative to other components on the page. Spacing can be managed for Top margin, Bottom margin, Left margin, and 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 to display or hide the component or feature.
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): 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:
Click add Add action, then select:
- Action Type: Use the Action Framework to launch actions.
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, 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 to display or hide the component or feature.