Share via

How do I make the horizontal menu, vertical?

Falanga, Rod, DOH 190 Reputation points
2024-09-11T21:23:40.9966667+00:00

I'm working on a rewrite of an old WebForms application. After numerous restarts of this application, I'm now using the ASP.NET MVC Core project template. I'm hoping to include Razor into this as well, but that's a separate topic.

The default menu for an ASP.NET MVC Core is horizontal, along the top. How do I make that menu vertical, along the left side of the browser window?

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,560 questions
0 comments
Accepted answer
  1. Ping Ni-MSFT 4,335 Reputation points Microsoft Vendor
    2024-09-12T02:23:13.9633333+00:00

    Hi Falanga, Rod, DOH,

    Here is a simple demo that make the horizontal menu:

    _Layout.cshtml

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MvcProj</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <link rel="stylesheet" href="~/MvcProj.styles.css" asp-append-version="true" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar -->
            <nav class="col-md-3 col-lg-2 bg-light sidebar" style="position: fixed; top: 0; left: 0; height: 100vh;">
                <div class="position-sticky">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="@Url.Action("Index", "Home")">
                                Home
                            </a>
                        </li>                        
                        <li class="nav-item">
                            <a class="nav-link" href="@Url.Action("Privacy", "Home")">
                                Privacy
                            </a>
                        </li>
                        <!-- Add more links as needed -->
                    </ul>
                </div>
            </nav>
            <!-- Main content -->
            <main class="col-md-9 ms-sm-auto col-lg-10" style="margin-left: 250px; padding-top: 20px;">
                @RenderBody()
            </main>
        </div>
    </div>
    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2024 - MvcProj - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
        </div>
    </footer>
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>
    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

    Add the css in the default existing css file(site.css in wwwroot/css folder)

    .sidebar {
    height: 100vh; /* Make the sidebar span the full height */
    position: fixed; /* Fix it on the left side */
}
.nav.flex-column {
    margin-top: 20px; /* Add some space at the top if necessary */
}
.nav-link {
    font-size: 1.1rem; /* Adjust link size */
    padding: 10px 15px; /* Adjust padding */
}
.main-content {
    margin-left: 250px; /* Main content pushed to the right of sidebar */
    padding-top: 20px; /* Add some padding at the top if necessary */
}

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Rena

    1 person found this answer helpful.

0 additional answers

Sort by: Most helpful
Most helpful Newest Oldest

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.