Thymleaf navbar

user_12339867 0
Viewed 2161

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>
thymeleaf navigation html
1 Answers

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>
user_118232370
Related