Base Components with Built-In Navigation Actions

Use base components that have automatic or built-in navigation actions.

The following base components support adding navigation controls to your own components. These components provide ways to open another page, or otherwise perform URL-based actions. You supply the URL, or text containing linkable items, and the component takes care of the rest.

Base ComponentDetails
lightning-breadcrumbBehaves like a hyperlink if a URL is provided via the href attribute.
lightning-carousel-imageBehaves like a hyperlink if a URL is provided via the href attribute.
lightning-click-to-dialDisplays a formatted phone number as click-to-dial enabled or disabled for Open CTI and Voice.
lightning-formatted-addressDisplays a formatted address with a link to the given location on Google Maps.
lightning-formatted-emailDisplays an email as a hyperlink with the mailto: URL scheme.
lightning-formatted-phoneDisplays a phone number as a hyperlink with the tel: URL scheme.
lightning-formatted-rich-textCreates hyperlinks in rich text automatically for linkable text and email addresses.
lightning-formatted-textURLs and email addresses are displayed as hyperlinks when you specify the linkify attribute. 
lightning-formatted-urlDisplays a URL as a hyperlink.
lightning-pillBehaves like a hyperlink if a URL is provided via the href attribute.
lightning-vertical-navigationBehaves like a hyperlink if a URL is provided via the href attribute.

Some of these components have limitations when used in an offline-enabled mobile app. See Base Components Support for details.

Note

There are additional base components that can have navigation actions attached to them, such as buttons and tabs. These components require you to add click handlers or other functionality in the form of JavaScript code. See Programmatic Navigation Actions.

See Also