Sites 05 / 15
Instant Navigation
Instant page navigation
When a visitor moves between the pages of your site, the page does not reload. The moment they hover over, focus, or touch a link, your site quietly fetches that page in the background; when they click, the new page's content replaces the old one in place. A page that was fetched in advance appears immediately. The browser's address bar, tab title, and back and forward buttons all behave exactly as they always have.
Every template in the catalog works this way, and so does every site the assistant builds from a prompt. There is nothing to set up.
What visitors notice
- Links feel immediate. Most clicks show the new page before a full reload would have begun, because the page was fetched while the pointer was still on its way to the link.
- The header and footer stay put. Your navigation, logo, and footer are shared by every page, so they never flash or reflow between pages. The highlighted navigation item still follows the page you are on.
- Back and forward work. Each page is a real entry in the browser's history, and going back returns the visitor to the spot they were scrolled to.
- Search engines see ordinary pages. Every page is still a complete document at its own address. Nothing about search, sharing, or bookmarking changes.
If a page is slow to arrive, a thin bar in your site's accent color shows at the top of the window until it does.
When a link loads the whole page instead
Some links are left to the browser, because that is the right thing for them:
- links to other websites, email addresses, and phone numbers
- links to files, such as a PDF or an RSS feed
- links set to open in a new tab
- a page that uses a different layout than the one you are on (a post layout with its own header, say)
- a link that has been marked to load the page whole (see below)
If a page cannot be swapped in, because it failed to load or is not an ordinary page, the browser simply loads it the normal way. Visitors never see a broken state.
Where it runs
Instant navigation is on wherever your site is served as a site: your published address, a custom domain, the plain preview, the gallery previews of the catalog templates, and the ZIP you export. Two places deliberately leave links to the browser: the editor canvas, where the builder itself handles moving between pages, and the /site/{slug} address on devdojo.com, which sandboxes user content and so cannot fetch pages in the background.
Turning it off for a link, a section, or the whole site
Ask the assistant. "Make the pricing link load the full page" or "turn off instant navigation on this site" is enough: the assistant adds data-instant-navigation="false" to that link, to a region of the page, or to the layout, and the browser takes over there. In Code mode you can do the same by hand. The switch is data-instant-navigation on the layout's <body> tag, and any element carrying data-instant-navigation="false" opts itself and everything inside it out.
If something on a page stops working after clicking around
Everything inside a page's <main> is replaced on each navigation, while the header, footer, and the layout's scripts stay. Every catalog template's script runs its set-up again after every swap, so galleries, accordions, and reveal effects keep working. If you have edited a script yourself and something only works on the first page a visitor lands on, the fix is a set-up function that runs on load and again when the page changes:
function setUp(root) {
root.querySelectorAll('.reveal').forEach(function (el) { /* … */ });
}
setUp(document);
document.addEventListener('instant:navigated', function (event) {
setUp(event.detail.main);
});
Tell the assistant what stopped working and it will make the change for you. See Layouts for how the layout wraps every page, and Publishing for where your site is served.