Salesforce Console Developer Guide
jNote: This release is in preview. Features described here don’t become generally available until the latest general availability date that Salesforce announces for this release. Before then, and where features are noted as beta, pilot, or developer preview, we can’t guarantee general availability within any particular time frame or at all. Make your purchase decisions only on the basis of generally available products and features.
getNavigationItems() for Lightning Experience
Arguments
LWC Sample Code
This example retrieves and inspects all available items within a Lightning console app's navigation menu.
1import { LightningElement } from 'lwc';
2import { getNavigationItems } from 'lightning/platformNavigationItemApi';
3
4export default class MyComponent extends LightningElement {
5 navigationItems = [];
6
7 async connectedCallback() {
8 try {
9 this.navigationItems = await getNavigationItems();
10 console.log('Available navigation items:', this.navigationItems.length);
11
12 // Display each item
13 this.navigationItems.forEach(item => {
14 console.log(`${item.label} (${item.developerName})`,
15 item.selected ? '- SELECTED' : '');
16 });
17 } catch (error) {
18 console.error('Failed to load navigation items:', error);
19 }
20 }
21}This example enables users to select a navigation item from a list using both getNavigationItems() and setSelectedNavigationItem().
1import { LightningElement } from 'lwc';
2import { getNavigationItems, setSelectedNavigationItem } from 'lightning/platformNavigationItemApi';
3
4export default class NavigationSwitcher extends LightningElement {
5 navItems = [];
6 selectedDeveloperName;
7
8 async connectedCallback() {
9 await this.loadNavigationItems();
10 }
11
12 async loadNavigationItems() {
13 try {
14 // Identify which item is currently selected
15 this.navItems = await getNavigationItems();
16 const selected = this.navItems.find(item => item.selected);
17 this.selectedDeveloperName = selected?.developerName;
18 } catch (error) {
19 console.error('Failed to load navigation items:', error);
20 }
21 }
22
23 async handleNavigationChange(event) {
24 const newDeveloperName = event.target.value;
25 try {
26 // Update the active page
27 await setSelectedNavigationItem(newDeveloperName);
28 // Update the current navigation state
29 this.selectedDeveloperName = newDeveloperName;
30 } catch (error) {
31 console.error('Navigation change failed:', error);
32 }
33 }
34}Aura Components Sample Code
This component has a button that, when pressed, returns information about the navigation items in a console app.
Component code:
1<aura:component implements="flexipage:availableForAllPageTypes" access="global">
2 <lightning:navigationItemAPI aura:id="navigationItemAPI"/>
3 <lightning:button label="Get navigation item" onclick="{!c.getNavigationItems}"/>
4</aura:component>Controller code:
1({
2 getNavigationItems : function(component, event, helper) {
3 var navigationItemAPI = component.find("navigationItemAPI");
4 navigationItemAPI.getNavigationItems().then(function(response) {
5 console.log(response);
6 })
7 .catch(function(error) {
8 console.log(error);
9 });
10 }
11})Response
This method returns a promise that, upon success, resolves to an array of navigationItemInfo objects. The promise is rejected on error.
The navigationItemInfo object contains the following fields.
| Name | Type | Description |
|---|---|---|
| developerName | string | The navigation item’s developer name that uniquely identifies the item. For example, Salesforce_Account or Your_VF_Page_Name. |
| label | string | The navigation item’s label, such as Account or Case. |
| pageReference | object | The representation of the current page. The object returns information such as: page type (for example standard__objectPage or standard__navItemPage), object API name, and state information for the page. |
| selected | boolean | True if the tab is currently selected, false otherwise. |
1{
2 developerName : string,
3 label : string,
4 pageReference: object,
5 selected : boolean
6}The PageReference structure looks like this.
1{
2 type: 'standard__objectPage',
3 attributes: {
4 objectApiName: 'Account',
5 actionName: 'home'
6 },
7 state: {
8 // Optional state parameters
9 }
10}