Turbo Drive is the part of Turbo that enhances page-level navigation. It watches for link clicks and form submissions, performs them in the background, and updates the page without doing a full reload. It’s the evolution of a library previously known as Turbolinks.
-Turbo Drive models page navigation as a visit to a location (URL) with an action.
Visits represent the entire navigation lifecycle from click to render. That includes changing browser history, issuing the network request, restoring a copy of the page from cache, rendering the final response, and updating the scroll position.
There are two types of visit: an application visit, which has an action of advance or replace, and a restoration visit, which has an action of restore.
@@ -214,6 +214,19 @@If you want Drive to be opt-in rather than opt-out, then you can set Turbo.session.drive = false; then, data-turbo="true" is used to enable Drive on a per-element basis. If you’re importing Turbo in a JavaScript pack, you can do this globally:
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = falseIn browsers that support the View Transition API Turbo can trigger view transitions when navigating between pages.
+Turbo triggers a view transition when both the current and the next page have this meta tag:
+<meta name="view-transition" content="same-origin" />
+Turbo also adds a data-turbo-visit-direction attribute to the <html> element to indicate the direction of the transition. The attribute can have one of the following values:
forward in advance visits.back in restoration visits.none in replace visits.You can use this attribute to customize the animations that are performed during a transition:
+html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {
animation: slide-to-right 0.5s ease-out;
}During Turbo Drive navigation, the browser will not display its native progress indicator. Turbo Drive installs a CSS-based progress bar to provide feedback while issuing a request.
The progress bar is enabled by default. It appears automatically for any page that takes longer than 500ms to load. (You can change this delay with the Turbo.setProgressBarDelay method.)
data-turbo-visit-direction is added to the html element during a visit, with a value of forward or back or none, to indicate its direction.aria-busy is added to html and turbo-frame elements when a navigation is in progress.<meta name="turbo-cache-control"> to opt out of caching.<meta name="turbo-visit-control" content="reload"> will perform a full page reload whenever Turbo navigates to the page, including when the request originates from a <turbo-frame>.<meta name="turbo-root"> to scope Turbo Drive to a particular root location.<meta name="view-transition" content="same-origin"> to trigger view transitions on browsers that support the View Transition API.<meta name="turbo-refresh-method" content="morph"> will configure page refreshes with morphing.<meta name="turbo-refresh-scroll" content="preserve"> will enable scroll preservation during page refreshes.