Skip to content

Frames

Basic frame

Confines all navigation within the frame by expecting any followed link or form submission to return a response including a matching frame tag:

<turbo-frame id="messages">
<a href="/messages/expanded">
Show all expanded messages in this frame.
</a>

<form action="/messages">
Show response from this form within this frame.
</form>
</turbo-frame>

Eager-loaded frame

Works like the basic frame, but the content is loaded from a remote src first.

<turbo-frame id="messages" src="/messages">
Content will be replaced when /messages has been loaded.
</turbo-frame>

Lazy-loaded frame

Like an eager-loaded frame, but the content is not loaded from src until the frame is visible.

<turbo-frame id="messages" src="/messages" loading="lazy">
Content will be replaced when the frame becomes visible and /messages has been loaded.
</turbo-frame>

Frame targeting the whole page by default

<turbo-frame id="messages" target="_top">
<a href="/messages/1">
Following link will replace the whole page, not this frame.
</a>

<a href="/messages/1" data-turbo-frame="_self">
Following link will replace just this frame.
</a>

<form action="/messages">
Submitting form will replace the whole page, not this frame.
</form>
</turbo-frame>

Frame with overwritten navigation targets

<turbo-frame id="messages">
<a href="/messages/1">
Following link will replace this frame.
</a>

<a href="/messages/1" data-turbo-frame="_top">
Following link will replace the whole page, not this frame.
</a>

<form action="/messages" data-turbo-frame="navigation">
Submitting form will replace the navigation frame.
</form>
</turbo-frame>

Attributes, properties, and functions

The <turbo-frame> element is a custom element with its own set of HTML attributes and JavaScript properties.

HTML Attributes

Properties

All <turbo-frame> elements can be controlled in JavaScript environments through instances of the FrameElement class.

Functions

Next: Streams