.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

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

    <li class='menu-item@(currentPage == "/TestPage" ? " active" : "")'>
      <a asp-page="/TestPage" class="menu-link">
        <i class="menu-icon tf-icons ti ti-smart-home"></i>
        <div data-i18n="TestPage">TestPage</div>
      </a>
    </li>
    <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>
  1. If you create a submenu with parent then parent should start with prefix path of the page:
  2. <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 ti ti-list'></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>
  3. Note: If you are using internationalization then you have to add your page name in wwwroot\json\locales\{en|fr|de|pt}.cshtml files.
© 2017- Pixinvent, Hand-crafted & Made with ❤️