# How to use fragments in Thymeleaf By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Feb 8, 2020, updated Feb 9, 2020. Topics: Thymeleaf. Canonical URL: https://attacomsian.com/blog/thymeleaf-fragments > A quick guide to learn how to use fragments in Thymeleaf templates. A fragment in Thymeleaf is a small piece of code that can be included in other templates. It is a common practice in web development to create reusable, small components like the header, footer, navigation menu and other parts of a website that are repeated used on multiple pages. In this article, you'll **learn how to create and use fragments** in Thymeleaf templates. If you are new to Thymeleaf, take a look at the [introductory tutorial](https://attacomsian.com/blog/spring-boot-thymeleaf-example) to learn how to use Thymeleaf with Spring Boot. > **Note:** For more complex Thymeleaf layouts and reusable templates, take a look at [Thymeleaf Layout Dialect](https://attacomsian.com/blog/spring-boot-thymeleaf-layouts) tutorial. ## Defining & Referencing Fragments To **define a Thymeleaf fragment**, you need to use the `th:fragment` attribute. You can define fragments either in separate files (recommended) or in a common file. It is also a good practice to place all fragments in a dedicated folder called `fragments` inside the templates directory (`src/main/resources/templates/`). Let us say you want to define a reusable footer component to add copyright information to all of your web pages, so you just create a `footer.html` file with the following content: ```markup ``` The above code defined a fragment called `footer` that you can easily include to your homepage by using one of the `th:insert` or `th:replace` attributes: ```markup ...
``` You can also **define more than one fragment in a single HTML document** as shown in the blow file called `components.html`: ```markup

Welcome to My Blog

``` ## `th:insert` & `th:replace` Attributes Thymeleaf provides multiple ways to **include a fragment** into a template: * `th:insert` — Inserts the fragment content inside the host tag * `th:replace` &mdahs; Replaces the host tag with the specified fragment content * `th:include` — Similar to `th:insert` but it only inserts the contents of the specified fragment (depreciated since 3.0) The following example shows how you can include the `header` fragment from `components.html` using the above three approaches: ```markup
``` The **rendered HTML document** will look like the following: ```markup

Welcome to My Blog

Welcome to My Blog

Welcome to My Blog

``` ## Including with DOM Selectors In Thymeleaf, you don't need to **explicitly** use `th:fragment` attribute to define fragments. They can be included in another template by using just DOM selectors like class name, element ID, or tag name similar to do what we do in [JavaScript](https://attacomsian.com/blog/getting-dom-elements-javascript). Here is an example: ```markup
``` The above example will include a `
` element that has the `.title` CSS class from the `compoments.html` file. ## Parametrized Fragments Thymeleaf fragments defined with `th:fragment` attribute can **specify arguments**, just like methods. To use a parameterized fragment, you need to define it as a function call with a declared list of parameters: ```markup

Hey! I'm !

``` Now you can use one of the following syntaxes to include the above fragment using `th:replace` or `th:insert` attribute: ```markup
``` Since the second option uses **named parameters**, the order of the parameters is no longer important: ```markup
``` Thymeleaf parameterized fragments are very useful as it allows us to reuse one small piece of code in many different ways. ## Fragment Inclusion Expressions Thymeleaf fragment inclusion syntax fully supports [conditional expressions](https://attacomsian.com/blog/thymeleaf-conditions) to dynamically load different fragments. In `templatename :: selector` format, both `templatename` and `selector` can be fully-featured expressions. For example, in the below code snippet, we want to include different fragments depending on a condition. If the authenticated user is an administrator, we will show a different footer; otherwise, the default one: ```markup
``` The `footer.html` file looks slightly different, as we have to define two footers now: ```markup ``` If the **fragments**, you want to conditionally include, are **defined in separate files**, you have to use the **fragment expression** syntax introduced in version 3.0: ```markup
``` ## Flexible Layouts **Fragment expressions** are useful not only for defining fragments that use numbers, strings, bean objects as parameters, but also fragments of markup. This allows us to create fragments that can be enhanced with the markup coming from the calling templates, thus providing a very **flexible layout** technique. Let us say that you want to create a base `` section with a default list of styles and scripts, but also want to have a possibility to extend the list with other resources if required. Here is how the base header looks like:

base.html

```markup Atta | Founder. Developer. Blogger. ``` Now if you want to **include additional links** to the default header, just call the `baseHead` fragment like below in your template: ```markup Introduction to Thymeleaf Fragments | Atta Blog ``` In the above example, `::tittle` and `::link` are pointing to the title and link tags in the calling template. The resultant header will use the actual `` and `<link>` tags from the calling template as the values of the `title` and `links` parameters as shown in the below-rendered HTML: ```markup <head> <title>Introduction to Thymeleaf Fragments | Atta Blog ``` ## Layout Inheritance Thymeleaf fragments can also be used to **create a simple layout**. For example, you can create a single file called `layout.html` that has the following structure:

layout.html

```markup Layout Title

Layout Main Heading

Layout contents

© 2020 Layout footer

``` As you can see above, we have declared a fragment called `layout` with `title` and `content` as parameters. Both these parameters will be replaced with the calling template tags by using the fragment expressions as shown below: ```markup Welcome to My Site

This is just an extra text.

Contact Us
``` In rendered **HTML** document, the `` tag will be replaced by the `layout` fragment. But in the `layout` fragment, `title` and `content` will be replaced by `` and `<section>` blocks respectively. Here is the final HTML output: ```markup <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Welcome to My Site

Layout Main Heading

This is just an extra text.

Contact Us
``` ## Conclusion That's all folks. In this article, we looked at how to create and reuse different components of a web page with the help of Thymeleaf fragments, a powerful feature that makes the template management easier and flexible. We also discussed different formats available to include fragments in Thymeleaf templates, and how to work with parameterized fragments. In the end, we presented an example to create simple layouts using fragment expression syntax. To learn more about Thymeleaf layouts, take a look at the [official documentation](https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout) that presents more in-depth examples. **Read Next:** [Working with Thymeleaf Layout Dialect in Spring Boot](https://attacomsian.com/blog/spring-boot-thymeleaf-layouts)