Nested Layouts with Ruby on Rails

💡 Rails Designer has a collection of beautiful layouts ready for your Rails app. 👈

If you are familiar with Static Site Generators (like Jekyll, Middleman or Bridgetown) you might have used nested layouts. Within, say a “docs”-layout, you reference the “default” layout in the frontmatter. Something like this:

---
layout: default
---

I often use a nested layout for my SaaS’ settings page. It features a dedicated navigation for the many settings of the product. Unfortunately, Rails doesn’t have a native way to nest layouts. But it’s not too difficult to built yourself!

The cleanest solution and the one I use in my Rails apps, looks like this:

Create a SettingsController

# app/controllers/settings_controller.rb
class SettingsController < ApplicationController
end

All other settings-controllers will inherit from this (base) controller, eg. Settings::TeamsController < SettingsController. Because the SettingsController matches the layout name (“settings”), this layout will always be picked up correctly. Let’s create that settings-layout now.

Create a settings-layout

# app/views/layouts/settings.html.erb
<div class="md:h-screen grid grid-cols-12 gap-4 md:gap-2 lg:gap-8">
  <⁠%= component "navigation/settings", account: Current.account %>

  <div class="col-span-12 md:col-span-8 lg:col-span-9">
    <⁠%= yield %>
  </div>
</div>

<⁠% parent_layout "application" %>

You can add whatever component/HTML you need here (Rails Designer’s Sidebar Navigation is a good fit). Make sure to include the yield method!

Create a parent_layout helper

This helper is the important part that makes the nested layout work.

# app/helpers/layouts_helper.rb
module LayoutsHelper
  def parent_layout(layout)
    @view_flow.set(:layout, output_buffer)

    output = render(template: "layouts/#{layout}")

    self.output_buffer = ActionView::OutputBuffer.new(output)
  end
end

The parent_layout method saves the current output, then renders the specified parent layout (eg. layouts/application) and finally sets this rendered output as the new output buffer to encapsulate the nested layouts.

Go read this article if you are interested in learning more how layouts work in Ruby on Rails (this article was extracted from it).