Instant page navigation
Why moving between the pages of your website feels immediate, what happens behind it, and how to turn it off for a link.
When a visitor moves between the pages of your website, the page does not reload. The moment they hover over, focus, or touch a link, your website 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 website the assistant builds works this way from its first page. 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.
- A page that styles its header differently still gets it. If your home page's header sits transparently over its opening image while every other page has a solid bar, each page arrives with its own — exactly as it looks when opened directly or refreshed.
- 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 brand's primary 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 brochure
- links set to open in a new tab
- a link the assistant has marked to load the page whole (see below)
If a page cannot be swapped in — it failed to load, it is not an ordinary page, one of your website's scripts would not set up its content again after the change (so its text or animations would stay hidden), or the page is built with a band above or around its header that the page before it does not have — the browser simply loads it the normal way. Visitors never see a broken or blank page.
Turning it off for a link, a section, or the whole website
Ask the assistant. "Make the pricing link load the full page" or "turn off instant
navigation on this website" 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 Developer 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 content area is replaced on each navigation, while the
header, footer, and the page's scripts stay. A script the assistant wrote runs its set-up
again after every swap, so galleries, accordions, and reveal effects keep working. If you
have edited a page's code yourself and something only works on the first page a visitor
lands on, tell the assistant what stopped working — it knows how to make a script listen
for the page change (mab:navigated) — or see
Blade templates if you would rather fix it yourself.