In this tutorial, you will learn how to create reusable html / javascript component in Thymeleaf. It is always good to keep our code DRY (Don’t Repeat Yourself), so making some common reusable parts for site where we can use it in different pages or files. Learn more about thymeleaf.

Thymeleaf is a template engine. It is a modern server-side Java template engine for both web and standalone environments. Allows HTML to be correctly displayed in browsers and as static prototypes. Here you can find simple Spring Boot MVC Project with Thymeleaf Dependency.
Maven Dependencies
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Gradle Dependencies
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
Simple Controller
@GetMapping("/") public String homePage() { return "index.html"; }
Fragments in Thymeleaf
It is recommended to keep all fragments in a folder. Inside resources/templates
create a folder with name fragments
. We will create a fragment for header section with name header-fragment.html
<title>Thymeleaf Fragment Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
Now we can insert the above header-fragment.html
in our index.html
<!DOCTYPE html>
<html lang="en">
<head th:insert="fragments/header-fragment
.html"> </head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My Site</h1>
<p>Simple example of fragments</p>
</div>
</body>
</html>
If you notice above HTML. we have inserted fragment in head
tag with th:insert
. If you are not using keeping fragments
folder, you can keep path without folder name – th:insert="header-fragment.html"
Fragment Inclusion Tags
There are three basic ways to include content from a fragment:
- insert – inserts content inside the tag
- replace – replaces the current tag with the tag defining the fragment
- include – this is deprecated but it may still appear in a legacy code
Replace fragment Tag Example
<!-- header-fragment.html --> <title>Simple Title</title>
<!-- menu-fragment.html --> <ul> <li>Home</li> <li>Blog</li> <li>About Us</li> </ul>
Now we can insert the above menu-fragment.html
in our index.html
<!DOCTYPE html> <html lang="en"> <head th:insert="fragments/header-fragment.html"> </head> <body> <div th:replace="fragments/menu-fragment.html"></div> </body> </html>
Above if you see, we use th:replace
. This will replace the div tag as well. In th:insert
content is added inside the tag.