Which links are handled

What Pagefold takes over, what it leaves to the browser, and how to opt a link out.

By default Pagefold handles every a[href] on the page (change it with linkSelector). It leaves a link to the browser when:

• it points to another origin;
• it has target="_blank" or a download attribute;
• it is clicked with a modifier key (Cmd, Ctrl, Shift, Alt) or any button other than the left one. The hook link:newtab fires for modifier clicks;
• it, or an ancestor, has the attribute data-no-pagefold;
• your ignoreVisit(url, { el, event }) option returns true.

<a href="/legacy-page" data-no-pagefold>Normal page load</a>

The decision, step by step

Every click on a link goes through these questions, in this order. The first “yes” hands the link back to the browser. If every answer is “no”, Pagefold takes over.

1. Is it on another origin? Another domain, subdomain or port.
   Yes → browser
   No ↓
2. Does it have target="_blank" or download?
   Yes → browser
   No ↓
3. Does it, or an ancestor, have data-no-pagefold? Or does your ignoreVisit option return true?
   Yes → browser
   No ↓
4. Was a modifier key held (Cmd, Ctrl, Shift, Alt)? The hook link:newtab fires first.
   Yes → browser
   No ↓
5. Was it any button other than the left one?
   Yes → browser
   No ↓
6. Pagefold handles it: link:click fires, then the visit starts.

Yes: The browser handles it, as if Pagefold was not there.

Links to the current page

Per-link attributes

<!-- Use the animation named "slide" -->
<a href="/about" data-pagefold-animation="slide">About</a>

<!-- Replace the history entry instead of adding one -->
<a href="/step-2" data-pagefold-history="replace">Next</a>

The attribute can be on the link or on any ancestor.

Keeping elements across pages

Elements with data-pagefold-persist and a name survive a visit. Put the same element, with the same name, in every page.

<audio data-pagefold-persist="player" src="song.mp3" controls></audio>

Navigating from code

pagefold.navigate('/about')
pagefold.navigate('/about', { animation: 'slide', history: 'replace' })

See The Pagefold instance for all the options.