Formatted URL

A lightning-formatted-url component shows a URL by using an anchor <a> tag with an href attribute. The value you provide can be a relative or absolute URL. An absolute URL uses a protocol like http://, https://, or ftp://, followed by the domain name and path. The component renders the link by using the http:// protocol by default.

URLs without a protocol use the host domain’s protocol. For example, www.example.com is prefixed with https:// if the host domain’s protocol is https://.

To customize the text, provide a label. Otherwise, the component shows the URL that you pass into value.

1<template>
2    <lightning-formatted-url
3        value="https://salesforce.com"
4        label="Visit salesforce.com"
5        target="_blank"
6    ></lightning-formatted-url>
7</template>

The rendered HTML looks like this.

1<a href="https://salesforce.com" target="_blank">Visit salesforce.com</a>

By default, clicking the link takes you to the URL in the same frame.

To create an absolute URL, set the value attribute by using one of these patterns.

• www.salesforce.com
• http://www.salesforce.com
• https://developer.salesforce.com/docs/component-library

http:// is inserted before a value like www.salesforce.com or my/path, which doesn’t begin with a slash. This creates an absolute URL like http://www.salesforce.com or http://my/path. This behavior is contrary to that of the anchor <a> tag where omitting the leading slash results in a relative path from the current directory.

This example displays an absolute URL and uses the provided value as the href value for the <a> tag.

1<template>
2    <lightning-formatted-url value="https://www.salesforce.com">
3    </lightning-formatted-url>
4</template>

If you don’t provide a protocol, the component appends the http:// prefix to the URL by default. The rendered HTML of the previous example uses https because it specifies the protocol.

1<a href="https://www.salesforce.com">https://www.salesforce.com</a>

URLs without a protocol use the host domain’s protocol. For example, the component prefixes www.example.com with https:// if the host domain’s protocol is https://.

To create a relative URL, set the value attribute by using one of these patterns.

• index.html
• /my/path
• ./my/path
• ../my/path

If the value includes a leading slash in the path like /my/path, the resulting URL is root-relative and uses the domain of the page as the prefix. For example, if the current page is located on example.com/directory/, the resulting URL is http://example.com/my/path. To create a URL from the current directory, start the URL with a dot-slash like ./my/path. To create a URL to the parent directory of the current page, start the URL with dot-dot-slash like ../my/path.

A relative URL navigates to a path within the current site you’re on.

1<template>
2    <!-- Resolves to http://current-domain/my/path -->
3    <lightning-formatted-url value="/my/path"> </lightning-formatted-url>
4</template>

The rendered HTML looks like this. Clicking the URL takes you to http://current-domain/my/path.

1<a href="/my/path">/my/path</a>

Use the target attribute to change where the link should open. If you don’t provide a target, lightning-formatted-url uses the _self target value.

Supported target values are:

• _blank: Opens the link in a new window or tab. In a mobile hybrid app like the Salesforce mobile app, the link is handled similar to _self and opens inside the app if possible.
• _self: Opens the link in the same frame as it was clicked. This is the default behavior. In Lightning Experience and Experience Builder sites, the link is opened in a new tab if it can’t be opened inside the app. We recommend that you use lightning-navigation to create links within Lightning Experience and Experience Builder sites.
• _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.

For more information about link targets, see the MDN Web Docs.

We recommend using absolute URLs where possible as they can prevent duplicate content to improve search engine optimization. Having your internal links as relative URLs can also expose the structure of your website.

lightning-formatted-url does not support email addresses or phone numbers. To create an email address with the mailto: protocol, use lightning-formatted-email. To create a phone number with the tel: protocol, use lightning-formatted-phone.

The framework handles navigation for you, so there’s no need to provide onclick behavior with lightning-formatted-url.

To create a link with a custom onclick event handler, use the HTML anchor tag <a> instead. To create a URL that navigates to another page in Salesforce, use lightning-navigation.

Object Reference for the Salesforce Platform: Field Types