Turbo Frames: scoped navigation inside a sidebar

2541 views

                  <%= turbo_frame_tag "sidebar" do %>
  <nav>
    <%= link_to "All", snips_path, data: { turbo_frame: "sidebar" } %>
    <%= link_to "Trending", snips_path(filter: :trending), data: { turbo_frame: "sidebar" } %>
    <%= link_to "Editors' choice", snips_path(filter: :editors_choice), data: { turbo_frame: "sidebar" } %>
  </nav>
<% end %>

                  class SnipsController < ApplicationController
  def index
    @snips = Snip.by_active
    @snips = @snips.trending if params[:filter] == 'trending'
    @snips = @snips.editors_choice if params[:filter] == 'editors_choice'

    render layout: !turbo_frame_request?
  end
end

You can build rich UIs by scoping navigation to a frame (e.g., a sidebar). Links inside the sidebar update only that frame while the main content stays put. This is great for filters and settings panels.

Sarah Chen

More from Sarah Chen

Turbo Frames: scoped navigation inside a sidebar

0 Comments

More from Sarah Chen