Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Aura Component Bundle Design Resources
Use Aura Components in Lightning Experience and the Salesforce Mobile App
Navigate Across Your Apps with Page References
Basic Navigation
Add Links to Lightning Pages from Your Custom Components
Add Query Parameters
Navigate to a Record Create Page with Default Field Values
Navigate to a Web Page
Migrate to lightning:isUrlAddressable from force:navigateToComponent
pageReference Types
Get Your Aura Components Ready to Use on Lightning Pages
Use Aura Components in Experience Builder
Use Aura Components with Flows
Add Components to Apps
Integrate Your Custom Apps into the Chatter Publisher
Using Background Utility Items
Use Lightning Components in Visualforce Pages
Add Aura Components to Any App with Lightning Out (Beta)
Lightning Container
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Add Links to Lightning Pages from Your Custom Components

To link to Lightning Experience pages, use lightning:formattedUrl in your custom component. The lightning:formattedUrl component displays a URL as a hyperlink.

If you use raw anchor tags or the ui:outputUrl (deprecated) component for links, the page does a full reload each time you click the link. To avoid full page reloads, replace your link components with lightning:formattedUrl.

For examples, see the Component Library.

Migrate from ui:outputUrl to lightning:formattedUrl

Copy the attributes from the ui:outputUrl component.

1<aura:component>
2    <ui:outputURL value="https://my/path" label="Contact ID" />
3</aura:component>

Paste the same attributes into the lightning:formattedUrl component. lightning:formattedUrl supports more attributes, like tooltip.

1<aura:component>
2    <div aura:id="container">
3        <p><lightning:formattedUrl value="https://my/path" label="Contact ID" tooltip="Go to Contact's recordId" /></p>
4    </div>
5</aura:component>