Link Search Menu Expand Document


  • XML attribute: layout:replace
  • Data attribute: data-layout-replace

Similar to layout:insert in that you can pass HTML content to the template/fragments you’re replacing, but with the behaviour of Thymeleaf’s th:replace.

<div layout:replace="~{modal :: modal(title='Greetings')}">
  <p layout:fragment="modal-content">Hi there! 👋</p>


Say you want to build a modal template that can be reused from several places. You make it generic with placeholders for the header and body content, allowing the body to be defined by the calling template:


<section class="modal" layout:fragment="modal(title)">
  <header th:text="${title}">Title goes here</header>
  <div class="modal-body">
    <div layout:fragment="modal-content">
      Content goes here

If we took the HTML code at the top of this page to call this modal template, the result would be this:

<section class="modal">
  <div class="modal-body">
    <p>Hi there! 👋</p>

Note the <div> that included the layout:replace processor is gone. This is in line with how Thymeleaf’s th:replace behaves. If you need to keep the original element, try layout:insert instead, whose behaviour aligns with Thymeleaf’s th:insert.