# Fragment Thymeleaf
Thymeleaf fragments let you break down your templates into reusable layout elements. For example, Several pages may have different content but still have the same header and footer. In these cases, Writing these into a separate template file and reusing it is not a bad idea.
### Fragments in Action
Let’s take this snippet from a hypothetical home page.
```xml
....
.... Some content of the home page
....
Code language: HTML, XML (xml)
```
Here, The navbar logic would never change for different thymeleaf view. In these cases, we can define the navbar HTML into a separate fragment and import it everywhere as we want it. Let’s split our template.
First, create a thymeleaf fragment file `fragments/navbar.html` under the `templates` directory.
```xml
Code language: HTML, XML (xml)
```
Now, you can include this fragment into the `home.html` as shown below.
```xml
....
.... Some content of the home page
....
Code language: HTML, XML (xml)
```
### Ways to include thymeleaf fragments
We can include other fragments into a template in two different ways. Let’s find about each one of them.
#### `th:insert` Directive
If you want the fragment to be wrapped around by a parent tag, you should use `th:insert`. Here is the syntax for this approach.
```xml
This content will be gone
Code language: HTML, XML (xml)
```
The above snippet will result in a div containing the content of the `navbar.html` as shown below.
```xml
Code language: HTML, XML (xml)
```
As you see, the div tag exists with its original attribute.
#### th:replace directive
You can specify where to include a fragment using the `th:replace` directive. This directive will remove the current element and fill it with the content of the fragment.
```xml
This content will be gone
Code language: HTML, XML (xml)
```
Here the `
` element itself will be replaced by the content of `navbar.html`. The resultant code would look like this.
```xml
Code language: HTML, XML (xml)
```
### Points to note about thymeleaf fragments
1. **Fragments can be nested**. That is, one fragment can contain another fragment. However, Make sure you don’t make a cyclic dependency. For example, the following scenario will lead to infinite recursion.
2. In both `th:insert` and `th:replace` the content of the surrounding div is removed.
3. Fragments are loaded from the relative path from the file it is invoked.
4. There is also a `th:include` But this is just a deprecated version of `th:insert`.
### 1- Fragment là gì?
Một **Fragment** (Mảnh) là một phần trong một **Template**. **Thymeleaf** cho phép bạn nhập khẩu các **fragment** của **Template** này vào một **Template** khác. Có rất nhiều cách để bạn xác định một **Fragment**. Chẳng hạn:
* Lựa chọn tất cả các thẻ (tag) có thuộc tính (attribute) **th:fragment="search-fragment"**.
* Lựa chọn thẻ theo **ID**.
* Lựa chọn tất cả các thẻ theo **Css-class**.
* ....
Điều quan trọng khi bạn muốn nhập khẩu một **Fragmen**t của một **Template** nào đó, bạn phải mô tả được vị trí của nó.Cú pháp để mô tả vị trí của một **Fragment** thuộc một **Template** nào đó:
```
~{/path-to-template/template-name :: selector}
```
Nếu bạn muốn mô tả vị trí của **Fragment** thuộc **Template** hiện tại, thì có thể sử dụng một cú pháp ngắn gọn hơn:
```
~{:: selector}
~{this :: selector}
```
\~{templatename: fragmentname} (th:fragment)Lựa chọn **fragment** theo tên.\~{templatename: tagname} (Tag Name)Lựa chọn **fragment** theo tên của thẻ.Lựa chọn các thẻ con của một thẻ. Chẳng hạn, lựa chọn tất cả các thẻ **\