I am learning lightning components. I am wanting to know how to do a hyperlink you can click that takes the user to the recordId of the item clicked.

So for example I have a users card graphic with their information. One of these is their name, which is a hyperlink. You click it and it takes you to the recordId.

The custom object I am using for these users is called Guest__c

So the link in lightning for my Guest__c record looks like this


Lightning Component snippet:

        <div style="background-color:WhiteSmoke;">
        <div class="card-content" style="padding:5px;font-size:.7em;">{!v.item.title}

This above shows the item. {!v.item.title} is the name.


2 Answers 2


You can use Navigation Event. Here is an example from documentation:

Component [c:navToRecord]-

    <aura:attribute name="recordId" type="String" />

    <p><a onclick="{!c.handleClick}">link to record</a></p>

Controller [navToRecordController.js]-

    handleClick: function (component, event, helper) {
        var navEvt = $A.get("e.force:navigateToSObject");
            "recordId": component.get("v.recordId")

You can use lightning:formattedUrl. It is easy to use and it will make your code small.

Displays a URL as a hyperlink. This component requires API version 41.0 and later.

You can use it in the different way as follows:-

    <p><lightning:formattedUrl value="my/path" /></p>
    <p><lightning:formattedUrl value="https://my/path" tooltip="Go to https://my/path" label="My Cool Website" target="_blank" /></p>
    <p><lightning:formattedUrl value="ftp://my/path" tooltip="Go to ftp://my/path" /></p>
    <p><lightning:formattedUrl value="http://my/path" /></p>
    <p><lightning:formattedUrl value="/my/path" /></p>
    <p><lightning:formattedUrl value=".my/path" /></p>

The result will be like:-

My Cool Website

Usage Considerations

Use the target attribute to change where the link should open. If you don't provide a target, the hyperlink renders without the href attribute. Supported target values are:

  • _blank: Opens the link in a new window or tab.
  • _self: Opens the link in the same frame as it was clicked. This is the default behavior.
  • _parent: Opens the link in the parent frame. If there's no parent, this is similar to _self.
  • _top: Opens the link into the top-level browsing context. If there's no parent, this is similar to _self.

Reference:- https://developer.salesforce.com/docs/component-library/bundle/lightning:formattedUrl/example

  • +1 Nice, formatted url handles a lot of things like open in new window with right and middle mouse click
    – Raul
    Nov 16, 2018 at 20:49

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .