Skip to main content

​
Overview

Beyond basic record and page navigation, Lightning Web Components support advanced navigation patterns for list views, related lists, and other specialized use cases. Navigate to an object’s list view with optional filtering. 
import { LightningElement } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class NavToListView extends NavigationMixin(LightningElement) {
    navigateToList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'list'
            },
            state: {
                filterName: 'Recent'
            }
        });
    }
}
Source: navToListView.js:5
The filterName in the state object specifies which list view to display. Common values include:
  • Recent - Recently viewed records
  • AllContacts - All contacts (or similar for other objects)
  • Custom list view API names
Navigate to a related list on a record’s detail page. 
import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getSingleAccount from '@salesforce/apex/AccountController.getSingleAccount';

export default class NavToRelatedList extends NavigationMixin(
    LightningElement
) {
    @wire(getSingleAccount) account;

    navigateToRelatedList() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: this.account.data.Id,
                objectApiName: 'Account',
                relationshipApiName: 'Contacts',
                actionName: 'view'
            }
        });
    }
}
Source: navToRelatedList.js:10
The relationshipApiName is the API name of the relationship field, which is often the plural name of the related object (e.g., ‘Contacts’, ‘Opportunities’).

​
PageReference Types for Utilities

​
standard__objectPage (list view)

Navigate to filtered object list views.
​
type
string
required
Must be standard__objectPage
​
attributes.objectApiName
string
required
The API name of the object (e.g., ‘Contact’, ‘Account’)
​
attributes.actionName
string
required
Must be list for list views
​
state.filterName
string
The API name of the list view filter (e.g., ‘Recent’, ‘AllContacts’)

​
standard__recordRelationshipPage

Navigate to related lists on record pages.
​
type
string
required
Must be standard__recordRelationshipPage
​
attributes.recordId
string
required
The ID of the parent record
​
attributes.objectApiName
string
required
The API name of the parent object
​
attributes.relationshipApiName
string
required
The API name of the relationship (e.g., ‘Contacts’, ‘Opportunities’)
​
attributes.actionName
string
required
Usually view for viewing the related list

​
Advanced Patterns

​
Dynamic List View Selection

Allow users to select which list view to navigate to: 
export default class DynamicListNav extends NavigationMixin(LightningElement) {
    listViewOptions = [
        { label: 'Recent Contacts', value: 'Recent' },
        { label: 'All Contacts', value: 'AllContacts' },
        { label: 'My Contacts', value: 'MyContacts' }
    ];
    
    selectedListView = 'Recent';
    
    handleListViewChange(event) {
        this.selectedListView = event.detail.value;
    }
    
    navigateToSelectedListView() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'list'
            },
            state: {
                filterName: this.selectedListView
            }
        });
    }
}
Navigate to a related list and preserve context: 
export default class ContextualRelatedNav extends NavigationMixin(LightningElement) {
    @api recordId;
    @api objectApiName;
    
    navigateToOpportunities() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: this.objectApiName,
                relationshipApiName: 'Opportunities',
                actionName: 'view'
            }
        });
    }
}

​
Common Use Cases

Filtered Views

Navigate to pre-filtered list views for specific user workflows

Related Record Exploration

Jump directly to related lists to explore record relationships

Custom Navigation Menus

Build custom navigation experiences with multiple list view options

Contextual Actions

Provide quick access to related data from custom components

​
Finding Relationship API Names

To find the correct relationshipApiName for a related list:
  1. Navigate to Setup > Object Manager
  2. Select the parent object (e.g., Account)
  3. Go to Fields & Relationships
  4. Find the relationship field
  5. Use the Child Relationship Name value
If the relationship API name is incorrect, the navigation will fail or navigate to an unexpected page.

​
Summary Table

Navigation TargetTypeKey Attributes
Object List Viewstandard__objectPageactionName: 'list', state.filterName
Related Liststandard__recordRelationshipPagerecordId, relationshipApiName

​
Complete Example: Multi-Option Navigator

import { LightningElement, wire } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import getAccount from '@salesforce/apex/AccountController.getSingleAccount';

export default class MultiOptionNavigator extends NavigationMixin(
    LightningElement
) {
    @wire(getAccount) account;
    
    // Navigate to all contacts list view
    navigateToAllContacts() {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                objectApiName: 'Contact',
                actionName: 'list'
            },
            state: {
                filterName: 'AllContacts'
            }
        });
    }
    
    // Navigate to account's related contacts
    navigateToAccountContacts() {
        this[NavigationMixin.Navigate]({
            type: 'standard__recordRelationshipPage',
            attributes: {
                recordId: this.account.data.Id,
                objectApiName: 'Account',
                relationshipApiName: 'Contacts',
                actionName: 'view'
            }
        });
    }
}

Build docs developers (and LLMs) love

Get started for freeTalk to us