Transcript
In this Quick Tip, we're going to learn about the link element.
A link is a special element that takes the user to another page within the app or another website. It shares the same properties as links on a web page and uses browser properties like Open in a new tab or Copy the URL, which differs from the button element.
You would use a link element when you don't need to trigger a workflow to go to a page.
First, we must declare the link destination, which can either be an internal page in our app or an external URL to take the user to a different website. Depending on which we declare, we get the appropriate properties.
Using an internal page, we can pick the page we want—like a profile page—and send data over to it, like the current user.
If we select an external URL, we must input the URL we want this link to open, and we can declare if we want this link to then open in a new tab.
The other properties for the link element are shared between either an internal or external destination. For example:
We can make this link not clickable by default, so we would have to control it dynamically.
We can use the nofollow property to tell links to specifically not count for SEO purposes.
And we have properties to control page parameters as we navigate to a page.
For an external URL, we can send current page parameters, and for an internal URL, we can also send more parameters to the page with Send current page parameters. If there's any data stored in the page URL parameters when the page changes, the parameters will be carried over to the destination page as well. These parameters will be overridden by any parameters with the same name added using this property.
Send more parameters to the page is specifically for when the destination is set to internal. With this, we can send additional data to a page that isn't a thing. This property allows for a series of keys and values to send over with the link—so when you click the link, these are sent as parameters.
This can be text, a number, for a search, etc., and with it, you can get creative.
Experiment more by adding your own internal and external links using the link element.
That's it for this Quick Tip. For more, be sure to check out bubble.io/academy.