v134 · navigation
Link preview
event.sourceElement gives the Navigation API's intercept handler the exact element that triggered the navigation — the <a> or <form>. This demo reads data-preview-* attributes from the source element to show a preview sheet before confirming or blocking the navigation.
Modern Web APIs — reading list
The NavigateEvent overview is a good starting point for understanding how the Navigation API intercepts same-document navigations.
For external references, the Chrome Developers documentation covers the full API surface.
The sourceElement specification explains when the property is null (keyboard shortcut navigations, browser buttons).
This link is flagged as restricted and will be blocked by the intercept handler.
Finally, the feature catalogue lists all demos on this site.
Navigation intercept log:
navigation.addEventListener('navigate', e => {
const src = e.sourceElement; // the <a> that was clicked
if (!src || !src.dataset.previewTitle) return; // no preview data
e.intercept({
async handler() {
// Show preview sheet using data from the source element
const confirmed = await showPreview({
url: e.destination.url,
title: src.dataset.previewTitle,
desc: src.dataset.previewDesc,
type: src.dataset.previewType,
});
if (!confirmed) {
throw new Error('navigation cancelled by user');
}
// Actual navigation — update the DOM
await loadPage(e.destination.url);
}
});
});