Makes any element behave like a hyperlink.
Example
The following <span> element will navigate to /details when clicked:
<span up-href="/details">Read more</span>
Accessibility
When the element is not an <a> or <button>, it gains the following behaviors to make it more accessible:
- The element is given an
[role=link]
attribute so screen readers announce it as link.
- The element shows
pointer cursor when hovered over.
- The element can be focused with the keyboard.
- The element emits an
up:click event when activated.
- You may also assign an
[up-instant] attribute to make the element
activate on mousedown instead of click.
The link-like element cannot be opened in a new tab.
Advantages of <a> elements
In general you should prefer using regular hyperlinks (a[href]) over elements with [up-href]:
- Only regular links allow the user to open the destination in a new tab
- Regular links still work when JavaScript is unavailable.
- Regular links can be followed from crawlers like Google
<a> elements are also exceptional in that they may contain block elements.
Use cases of [up-href]
There are some use cases for [up-href]:
- When you want to prevent the user from opening a link in a new tab.
- When the element cannot be wrapped in an
<a>, e.g. a <tr>.
