Menu
Im working with Spring Boot and Thymeleaf as simple front end. Im very low in front end and i know just basics about thymleaf and html/css. I build simple forum where after login, user got few pages like, add topic, find topic, topic list, add inscription, edit inscription etc. I want to have this same navbar for every page. On this moment i just copy still this same html code and paste to every file, but what if i want to change one option?Yeees i know, i will have to change on every file. How can i fix it and put one navbar with this options to every page after login? I add for example my index.
<!DOCTYPE html>
<html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Home Page</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link th:href="@{/main.css}" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-light" style="background-color: #969bd9;">
<span class="navbar-brand">Home Page</span>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li sec:authorize="isAuthenticated()"><a th:href="@{/logout}">Logout</a></li>
</ul>
<ul class="nav navbar-nav">
<li sec:authorize="isAuthenticated()"><a th:href="@{/topic/all}"><n1>Topics</n1></a></li>
</ul>
</div>
</nav>
<div class="container">
<h1>Welcome <span sec:authentication="principal.username"> </span></h1>
</div>
<div class="container my-2">
<a th:href="@{/newTopic}" class="btn btn-success">Create new topic</a>
</div>
<div class="container my-3">
<a th:href="@{/topic/search}" class="btn btn-success">Find topic</a>
</div>
<div align="center" class="container my-2">
<h3>Last activity</h3>
<table border="1" style="width:800px" class="table table-bordered table-striped">
<thead>
<tr>
<th>Topic name</th>
<th>Date activity</th>
<th>Login</th>
</tr>
</thead>
<tbody>
<tr th:each="inscription : ${newInscriptionList}">
<td>
<a th:href="@{/topic/{id}(id = ${inscription.topic.id})}" th:text="${inscription.topic.title}"></a>
</td>
<td th:width="200" th:text="${#dates.format(inscription.createdAt, 'dd-MM-yyyy | HH:mm')}"></td>
<td th:width="200" th:text="${inscription.user.login}"></td>
</tr>
</tbody>
</table>
</div>
<div align="center" class="container my-2">
<h3>New Topics</h3>
<table border="1" style="width:800px" class="table table-bordered table-striped">
<thead>
<tr>
<th>Topic name</th>
<th>Created</th>
<th>Login</th>
</tr>
</thead>
<tbody>
<tr th:each="topic : ${newTopicList}">
<td>
<a th:href="@{/topic/{id}(id = ${topic.id})}" th:text="${topic.title}"></a>
</td>
<td th:width="200" th:text="${#dates.format(topic.createdAt, 'dd-MM-yyyy | HH:mm')}"></td>
<td th:width="200" th:text="${topic.user.login}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
So for example i want to get this nav bar to every page.
<nav class="navbar navbar-light" style="background-color: #969bd9;">
<span class="navbar-brand">Home Page</span>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li sec:authorize="isAuthenticated()"><a th:href="@{/logout}">Logout</a></li>
</ul>
<ul class="nav navbar-nav">
<li sec:authorize="isAuthenticated()"><a th:href="@{/topic/all}"><n1>Topics</n1></a></li>
</ul>
</div>
</nav>
489
asked Oct 29 '25 02:10
The answer is yes. You can simply do this with Thymleaf.
At first, make a file called navbar.html
Then insert your navbar code in there like this
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>NavigationBar</title>
</head>
<body>
<nav th:fragment="navbar" class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" th:href="@{/}">Student Management System</a>
</div>
<ul class="nav navbar-nav">
<li><a class="nav-link" th:href="@{/student}">Student List</a></li>
<li><a class="nav-link" th:href="@{/subjects}">Subjects</a></li>
<li><a class="nav-link" th:href="@{/teachers}">Teachers</a></li>
</ul>
</div>
</nav>
</body>
</html>
Then whenever you want, you can simply use it as follows. Use the following format for that in the div element.
th:insert="File_Name : : Fragment_Name"
You can get a better understanding from the following example.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Create New Student</title>
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" />
</head>
<body>
<div th:insert="navbar :: navbar"> </div>
<div>
<h1> Student Form </h1>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With