--- area: "Learn" parent: "Learn" url: "https://unpoly.com/learn/links" --- # Links Unpoly enhances links so they update a fragment of the current page, instead of loading a full new document. The rest of the page keeps its state: scroll positions, focus, unsaved form fields and running scripts all survive the click. ## Updating a fragment {#updating-a-fragment} To let Unpoly handle a link, set an [`[up-follow]`](https://unpoly.com/api/up-follow.md) attribute: ```html Preferences ``` When the user clicks, Unpoly fetches `/preferences`. The server renders a full HTML page, the same way it would for a regular page load. Unpoly then extracts the response's [main fragment](https://unpoly.com/api/main.md) and swaps it into the current page, leaving everything around it untouched. To update a different fragment, add an [`[up-target]`](https://unpoly.com/api/up-follow.md#up-target) attribute with a CSS selector: ```html
Page A
``` Clicking _B_ fetches `/pages/b` and replaces only the `
` element with its counterpart from the response. The link stays a standard hyperlink. When the user opens it in a new tab, or when JavaScript is unavailable, the browser makes a regular full page load. ## Handling all links {#handling-all-links} Instead of annotating every link, you can configure Unpoly to follow all links on the page: ```js up.link.config.followSelectors.push('a[href]') ``` ## Preloading links {#preloading-links} A link can request its destination before the user clicks, making the interaction feel instant: ```html Full story ``` Hovering over the link already loads the response into the [cache](https://unpoly.com/learn/caching.md). ## Highlighting the current location {#highlighting-the-current-location} Links in a navigation bar are marked with an [`.up-current`](https://unpoly.com/api/up-current.md) class when they point to the current page: ```html ``` Style that class with your CSS to highlight the active menu section. ## See also {#see-also} To make a `` or a table row act like a hyperlink, see [Elements that act like links or buttons](https://unpoly.com/learn/faux-interactive-elements.md).