RailsHow-ToBeginner · 4 min read

How to Use yield in Layout in Ruby on Rails

In Ruby on Rails, yield is used in layout files to insert the content of views dynamically where the yield statement is placed. It acts as a placeholder that renders the content from the current view template inside the layout.

📐

Syntax

The yield keyword in a Rails layout is placed where you want the view content to appear. You can also use named yields with yield :name to insert specific content blocks.

Basic syntax:

<%= yield %> - Inserts the main view content.
<%= yield :sidebar %> - Inserts content from a named block called :sidebar.

erb

<!DOCTYPE html>
<html>
<head>
  <title>MyApp</title>
</head>
<body>
  <header>Header content here</header>

  <main>
    <%= yield %> <!-- Main view content goes here -->
  </main>

  <aside>
    <%= yield :sidebar %> <!-- Optional sidebar content -->
  </aside>

  <footer>Footer content here</footer>
</body>
</html>

💻

Example

This example shows a layout using yield to insert the main content and a named yield for a sidebar. The view provides content for both.

erb

# app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
  <title>ExampleApp</title>
</head>
<body>
  <header><h1>Welcome to ExampleApp</h1></header>

  <main>
    <%= yield %>
  </main>

  <aside>
    <%= yield :sidebar %>
  </aside>

  <footer>© 2024 ExampleApp</footer>
</body>
</html>

# app/views/home/index.html.erb
<h2>Main Content</h2>
<p>This is the main page content.</p>

<% content_for :sidebar do %>
  <h3>Sidebar</h3>
  <p>Links and info here.</p>
<% end %>

Output

<!DOCTYPE html> <html> <head> <title>ExampleApp</title> </head> <body> <header><h1>Welcome to ExampleApp</h1></header> <main> <h2>Main Content</h2> <p>This is the main page content.</p> </main> <aside> <h3>Sidebar</h3> <p>Links and info here.</p> </aside> <footer>© 2024 ExampleApp</footer> </body> </html>

⚠️

Common Pitfalls

Common mistakes when using yield in Rails layouts include:

Forgetting to include <%= yield %> in the layout, which results in views not rendering inside the layout.
Using yield without = (e.g., <% yield %>) which does not output content.
Not using content_for blocks properly when using named yields, causing empty sections.

erb

<!-- Wrong: missing '=' so no output -->
<% yield %>

<!-- Correct: outputs the content -->
<%= yield %>

<!-- Wrong: named yield without content_for block -->
<%= yield :sidebar %> <!-- shows nothing if no content_for :sidebar -->

<!-- Correct: define content_for in view -->
<% content_for :sidebar do %>
  Sidebar content here
<% end %>

📊

Quick Reference

<%= yield %>: Inserts main view content into layout.
content_for :name: Defines content for a named yield.
<%= yield :name %>: Inserts named content block.
Always use <%= %> to output content, not just <% %>.
Layouts wrap views; yield is the insertion point.

✅

Key Takeaways

Use yield in layouts to insert the main view content dynamically.

Use content_for and named yield to insert optional content blocks like sidebars.

Always use <%= yield %> with equals sign to output content.

If you omit yield in a layout, the view content will not appear.

Named yields require matching content_for blocks in views to show content.