Layout Dialect Introduction
The Layout Dialect extends Thymeleaf with powerful layout inheritance features. It lets you create master layouts and extend them in child pages, just like template inheritance in other frameworks.
First, you need to add the layout namespace to your HTML tag. This enables all the layout dialect features.
Creating a Master Layout
A master layout defines the common structure for all your pages. It uses layout:fragment to mark areas that child pages can override.
Default Title
Default content
The layout:fragment="content" marks the area that child pages will fill in.
Extending the Layout
Child pages use layout:decorate to inherit from the master layout and override specific fragments.
Home Page
Welcome to the Home Page
This content replaces the default in the master layout.
The child page only needs to define the fragments it wants to override.
layout:title-pattern
The layout:title-pattern lets you control how the page title is constructed from the child and master layouts.
Default Title
Now if the child page sets <title>Home</title>, the final title will be "Home - My Application".
Multiple Fragments
You can define multiple fragments in your master layout and override only the ones you need.
Default Header
Default Content
Child pages can override any combination of these fragments.
Try it Yourself →layout:replace
Similar to th:replace, layout:replace replaces the host tag with the fragment content.
This is useful for including reusable components in your layout.
Page Inheritance Chain
You can create inheritance chains where layouts extend other layouts, creating a hierarchy of templates.
This creates a clean hierarchy: base → admin → user-admin, each adding its own pieces.