Spring Boot+Thymeleaf：如何添加顶部导航与侧边栏片段

阿华AIGC实验室

2026-5-15

Hey there! Let's walk through how to add the top navigation bar (right below your existing header) and a left-side sidebar to your app, using Bootstrap (since you already have it included) and Thymeleaf fragments. Here's a step-by-step breakdown:

First, make a new Thymeleaf fragment file called navbar.html in your templates folder. We'll use Bootstrap's built-in navbar component for a responsive, ready-to-use navigation bar:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <nav th:fragment="top-nav" class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/">My App</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</body>
</html>

Feel free to tweak the links, colors, and branding to match your app's needs.

Next, make another fragment file called sidebar.html in the templates folder. We'll use Bootstrap's grid system to build a clean sidebar:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
    <div th:fragment="left-sidebar" class="col-md-3">
        <div class="card mt-3">
            <div class="card-header">
                Sidebar Menu
            </div>
            <ul class="list-group list-group-flush">
                <li class="list-group-item"><a href="/dashboard">Dashboard</a></li>
                <li class="list-group-item"><a href="/profile">My Profile</a></li>
                <li class="list-group-item"><a href="/settings">Settings</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

This uses a Bootstrap card for a polished look, but you can adjust styling in your main.css if you want a different appearance.

3. Update Your index.html to Include the Fragments

Now let's modify your existing index.html to place the navbar right below the header, and the sidebar on the left with your main content to the right. Here's the updated code:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head lang="en">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"/>
<link rel="stylesheet" href="../static/css/main.css" th:href="@{css/main.css}" media="screen"/>
<title>Spring Boot | Web Application</title>
</head>
<body>
<!-- Header Banner -->
<div class="container">
    <div class="row" th:include="header :: banner"></div>
</div>

<!-- Top Navigation Bar (below header) -->
<div th:include="navbar :: top-nav"></div>

<!-- Main Content Area (Sidebar + Main Content) -->
<div class="container mt-4">
    <div class="row">
        <!-- Left Sidebar -->
        <div th:include="sidebar :: left-sidebar"></div>
        
        <!-- Main Content Column -->
        <div class="col-md-9">
            <h2>Welcome to Your App</h2>
            <p>This is your main content area. You can add your page-specific content here!</p>
            <!-- Replace with your actual content -->
        </div>
    </div>
</div>

<!-- Footer -->
<div class="container mt-5">
    <div class="row" th:include="footer :: copy"></div>
</div>

<!-- jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous">
</script>
</body>
</html>

4. Optional: Tweak Styles in main.css

If you want to adjust the sidebar's appearance (like making it fixed, adding padding, or changing colors), add these styles to your main.css:

/* Example sidebar styles */
.list-group-item a {
    color: #333;
    text-decoration: none;
}

.list-group-item a:hover {
    color: #007bff;
}

.navbar {
    margin-bottom: 20px;
}

Key Notes:

The navbar is placed outside the main content container to span the full screen width (move it inside a container if you want it constrained to the page's width).
We use col-md-3 for the sidebar and col-md-9 for the main content—Bootstrap will stack them on smaller mobile screens automatically.
mt-3/mt-4 classes add margin-top to create clean spacing between elements.

内容的提问来源于stack exchange，提问作者Nizzy