Labs ICT
⭐ Pro Login

URL Links

th:href and @{...} for dynamic URLs.

1 min read | Thymeleaf Tutorial
⭐

Want the full learning experience?

Get structured courses, certificates, projects, and instructor support with LabsICT Pro.

Explore Pro Courses

URL Links in Thymeleaf

Links are everywhere in web apps. Thymeleaf's th:href attribute makes sure your URLs work correctly, even with context paths and parameters.

Basic Links with th:href

Use th:href="@{/path}" to create dynamic links. Thymeleaf handles the context path automatically.


<a th:href="@{/users}">All Users</a>
<a th:href="@{/home}">Home</a>
    

If your app runs at /myapp, these generate /myapp/users and /myapp/home. No hardcoding needed.

Parameterized URLs

Pass variables in the URL path using curly braces. The value comes from a model attribute.


<a th:href="@{/user/{id}(id=${userId})}">View Profile</a>
    

If userId is 42, this generates /user/42. Clean and readable.

Query Parameters

Add query parameters inside the parentheses. Multiple parameters are separated by commas.


<a th:href="@{/search(q=${query}, page=1)}">Search</a>
<a th:href="@{/products(category=${cat}, sort='name')}">Products</a>
    

These become /search?q=shoes&page=1 and /products?category=electronics&sort=name.

Relative URLs

Start the path without a leading slash to make URLs relative to the current page.


<a th:href="@{profile}">My Profile</a>
<a th:href="@{../reports}">Reports</a>
    

profile links to a sibling of the current URL. ../reports goes up one level. Useful for nested page structures.

The Full URL Pattern

The @{...} syntax supports path variables, query params, and fragments all at once.


<a th:href="@{/order/{orderId}/item/{itemId}(orderId=${order.id}, itemId=${item.id}, view='detail')}">
    View Item
</a>
    

This generates something like /order/100/item/5?view=detail. All in one readable line.