.Net Core MVC Menu

Here, we'll discuss our sidebar menu/Navigation menu. We'll describe every method of our menus. Let's deep dive into it.

Introduction

We have two types of menus for two different layouts.

• Vertical menu for VERTICAL layout
• Horizontal menu for HORIZONTAL layout

We are using a .cshtml file to store all menus list and render it in our menus. You can find these menu files in the /Views/Shared/Sections/Menu/ folder.

• _HorizontalMenu.cshtml menu for HORIZONTAL layout
• _VerticalMenu.cshtml menu for VERTICAL layout

How to add new menu item?

To add your new menu item in menu/navigation, you need to add your page details in your preferred menu file (ex: For vertical menu, _VerticalMenu.cshtml).

1. To add menu item as main menu:
Copy

<li class='menu-item@(currentPage == "/Test/TestPage" ? " active" : "")'>
  <a asp-controller="Test" asp-action="TestPage" class="menu-link">
    <i class="menu-icon tf-icons bx bx-home-alt"></i>
    <div data-i18n="TestPage">TestPage</div>
  </a>
</li>

2. To add item as a sub menu item:
Copy

<ul class="menu-sub">
  <li class='menu-item@(currentPage == "/Test/TestPage" ? " active" : "")'>
    <a asp-controller="Test" asp-action="TestPage" class="menu-link">
      <div data-i18n="TestPage">TestPage</div>
    </a>
  </li>
</ul>

3. If you create a submenu with parent then parent should start with prefix path of the page:
Copy

<li class='menu-item@(currentPage.StartsWith("/Test") ? " active open" : "")'>
  <a href="javascript:void(0);" class="menu-link menu-toggle">
    <i class='menu-icon tf-icons bx bx-food-menu'></i>
    <div data-i18n="Test">Test</div>
  </a>
  <ul class="menu-sub">
    <li class='menu-item@(currentPage == "/Test/TestPage" ? " active" : "")'>
      <a asp-controller="Test" asp-action="TestPage" class="menu-link">
        <div data-i18n="TestPage">TestPage</div>
      </a>
    </li>
  </ul>
</li>

4. Note: If you are using internationalization then you have to add your page name in wwwroot\json\locales\{en|fr|de|pt}.cshtml files.