.Net Core 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 /Pages/Layouts/Sections/Menu/ folder.

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

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).

To add menu item as main menu:

<li class='menu-item@(currentPage == "/TestPage" ? " active" : "")'>
  <a asp-page="/TestPage" class="menu-link">
    <i class="menu-icon tf-icons ri-home-smile-line"></i>
    <div data-i18n="TestPage">TestPage</div>
  </a>
</li>

To add item as a sub menu item:

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

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

<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 ri-layout-2-line'></i>
    <div data-i18n="Test">Test</div>
  </a>
  <ul class="menu-sub">
    <li class='menu-item@(currentPage == "/Test/TestPage" ? " active" : "")'>
      <a asp-page="/Test/TestPage" class="menu-link">
        <div data-i18n="TestPage">TestPage</div>
      </a>
    </li>
  </ul>
</li>

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

.Net Core Menu

Introduction

How to add new menu item?