Edit this page

up.link [up-expand]
HTML selector

Add an [up-expand] attribute to any element to enlarge the click area of a descendant link.

[up-expand] honors all the Unppoly attributes in expanded links, like a[up-target], a[up-instant] or a[up-preload].

Example

<div class="notification" up-expand>
  Record was saved!
  <a href="/records">Close</a>
</div>

In the example above, clicking anywhere within .notification element would follow the Close link.

If a container contains more than one link, you can set the value of the [up-expand] attribute to a CSS selector to define which link should be expanded:

<div class="notification" up-expand=".close">
  Record was saved!
  <a class="details" href="/records/5">Details</a>
  <a class="close" href="/records">Close</a>
</div>

Limitations

[up-expand] has some limitations for advanced browser users:

  • Users won't be able to right-click the expanded area to open a context menu
  • Users won't be able to CTRL+click the expanded area to open a new tab

To overcome these limitations, consider nesting the entire clickable area in an actual <a> tag. It's OK to put block elements inside an anchor tag.

Modifying attributes

[up-expand] optional

A CSS selector that defines which containing link should be expanded.

If omitted, the first link in this element will be expanded.