How to make nav bar common for all pages in thymeleaf

Question

I am using thymeleaf for my front end design ,I create a nav bar and I want this nav bar work for all pages, my Requirement is make one nav bar and use this nav bar in every page ,with out define another nav bar in separate page . I create a nav bar inside my fragments folder that situated inside template folder When i call my nav bar in my index page it is not working Here is my code of index page index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Coursel</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="/static/demo.js"></script>
</head>
<body>
   <nav th:replace="/fragments/nav :: nav-front"></nav>
    <div class="container-fluid">
 here my register form codes
</div>
</body>
</html>

nav.html

    <nav class="nav">
        <a class="nav-link active" th:href="@{/templates/index.html}">Active</a>
        <a class="nav-link active" th:href="@{/templates/index.html}">Register</a>
        <a class="nav-link active" th:href="@{/templates/index.html}">Login</a>
        <a class="nav-link active" th:href="@{/templates/index.html}">AboutUs</a>
 </nav>

Here is my project structure

I use IntelliJ IDEA as code editor.

score 0 · Answer 1 · answered Jan 04 '22 at 10:18

It is possible, look into Thymeleaf Layout Dialect.

In short:

you create some layout.html in your templates folder. In it:

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
  <!-- all common head tags - meta etc. -->
  <title layout:title-pattern="$CONTENT_TITLE - $LAYOUT_TITLE">App name</title><!-- define title in your page template and it will be added too your app name, e.g. 'Home - My App' -->
</head>
<body>
  <nav>
    <!-- your nav here -->
  </nav>
  <section layout:fragment="content">
    <!-- don't put anything here, it will be replaced by the page contents -->
  </section>
</body>
</html>

And in you page templates:

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{/path/to/layout.html}">
<head>
  <title>Page name</title>
</head>
<body>
  <section layout:fragment="content">
    <p>This will be added into your layout!</p>
  </section>
</body>
</html>

In order to make it work, you will need to add it to your templateEngine() bean definition:

@Bean
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver( thymeleafTemplateResolver() );
    templateEngine.addDialect( new LayoutDialect() );
    return templateEngine;
}

See mvnrepository to import this dialect using maven.

How to make nav bar common for all pages in thymeleaf

1 Answers1