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>

Lazy-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>

Frame that drives navigation to replace whole page

<turbo-frame id="messages" target="_top">
<a href="/messages/1">
Following link will replace the whole page, not 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 and properties

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.

Next: Streams