Search⌘ K
Home
Courses
Building Scalable Applications with Thymeleaf and Spring Boot

Menu Item Components

Explore how to build reusable menu item components in Thymeleaf using fragments and parameters. Understand dynamic CSS class handling and SVG icon inline styling to create a maintainable, scalable codebase. This lesson guides you through improving code efficiency and readability for both desktop and mobile menus in your Spring Boot application.

We'll cover the following...

Our index.html is already looking a lot better, but we still have a lot of duplication in our fragments themselves.

In the menu on the left side, each menu item looks similar to this:

HTML
<a href="#"
class="mt-1 group flex items-center px-2 py-2 text-sm leading-5 font-medium textgray-
900 rounded-md bg-gray-100 hover:text-gray-900 hover:bg-gray-100 focus:outlinenone
focus:bg-gray-200 transition ease-in-out duration-150">
    <svg class="mr-3 h-6 w-6 text-gray-500 group-hover:text-gray-500 group-focus:textgray-
    600 transition ease-in-out duration-150"
    fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
    d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0
    01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
    </svg>
        Dashboard
</a>

The structure of menu items

We can identify the following structure:

  • The <a> HTML tag identifies the item as a link that can be clicked to navigate to that part of the application.
  • The href attribute indicates where to link to.
  • The <svg> child element contains the relevant icon for the menu item.
  • The “dashboard” text is shown to the user for the link.
  • The class attribute styles the menu item

Note: There is a slight difference in the class list as the Dashboard item is styled to look selected, while the others are not.

Creating a fragment

Let’s create a fragment. Start with a file sidebar-buttons.html to put our fragment in:

HTML
<html xmlns:th="http://www.thymeleaf.org">
<!--/*@thymesVar id="link" type="java.lang.String"*/-->
<!--/*@thymesVar id="title" type="java.lang.String"*/-->
<a th:fragment="desktop-button(link, title)"
th:href="${link}">
[[${title}]]
</a>
</html>

This gives us the basic structure to work with. We then declare the following two parameters to our fragment:

  • link
  • title
...