Tabbed Navigation with Turbo Frames

albums-index.html.erb

<p style="color: green"><%= notice %></p>

<h1>Albums</h1>

<%= turbo_frame_tag :items do %>
  <% @albums.each do |album| %>
    <%= render album %>
    <p>
      <%= link_to "Show this album", album %>
    </p>
  <% end %>
<% end %>

<%= link_to "New album", new_album_path %>

application.css

a {
    text-decoration: none;
    padding: 4px;
    border-radius: 4px;
    background: #fff;
    color: #000;
}

a.active {
    background: #000;
    color: #fff;
}

books-index.html.erb

<p style="color: green"><%= notice %></p>

<h1>Books</h1>

<%= turbo_frame_tag :items do %>
  <% @books.each do |book| %>
    <%= render book %>
    <p>
      <%= link_to "Show this book", book %>
    </p>
  <% end %>
<% end %>

<%= link_to "New book", new_book_path %>

references.md

• https://turbo.hotwired.dev/handbook/frames
• https://stimulus.hotwired.dev/reference/targets
• https://boringrails.com/articles/better-stimulus-controllers/

tabs-index.html.erb

<h1>Tabs</h1>

<div data-controller="tabs">
  <%= link_to "Albums", albums_path, class: "active",
              data: { turbo_frame: :items, tabs_target: "tab", action: "click->tabs#toggle" } %>
  <%= link_to "Books", books_path,
              data: { turbo_frame: :items, tabs_target: "tab", action: "click->tabs#toggle" } %>
</div>

<%= turbo_frame_tag :items, src: albums_path, target: :_top, loading: :lazy do %>
  <p>Loading...</p>
<% end %>

tabs_controller.js

import {Controller} from "@hotwired/stimulus"

export default class extends Controller {
    static targets = ["tab"];

    toggle(event) {
        this.tabTargets.forEach(tab => {
            if (tab === event.target) {
                tab.classList.add("active");
            } else {
                tab.classList.remove("active");
            }
        });
    }
}