Strategy

To achieve tutorial objectives we'll develop:

1. ASP .NET Core MVC Project
2. Navigation Menu JSON Files
3. Web Page with Navigation Control

ASP .NET Core MVC Project

1. Create New ASP .NET Core Web Application (MVC)
2. Install Packages:
   1. WindnTrees.Controls.Standard

Navigation Menu JSON Files

Bootstrap navigation menu control (navbar) enable web applications with managed access of user actions in form of menu links and items. Users may approach their intended functionality through menu items represented by their authorized roles.

Navigation menu with JSON files give programmers flexibility of composing dynamic menus without changing program code. Let us discuss the construction of JSON files that is consumed by WindnTrees.Controls.Standard data structure. WindnTrees navigation control can load menu from multiple files, each file represents a menu with links and menu items. For example,

navigation.json
{
  "authenticationMode": true,
  "version": "4.0",
  "cssClass": "container-fluid d-flex justify-content-start p-0",
  "tag": "ul",
  "attributes": [
    {
      "name": "class",
      "value": "navbar-nav"
    }
  ],
  "roles": [ "anonymous" ],
  "items":[
	{
      		"text": "Home1",
	      	"linkUrl": "/home/index"
	},
    	{
      		"text": "Home2",
      		"linkUrl": "/home/index"
    	}
] }

Navigation.json file represents a navbar menu with menu items maintained in an array. User can add item and link attributes in menu items as mentioned below:

{
      "text": "Home1",
      "linkUrl": "/home/index",
      "linkAttributes": [
        {
          "name": "class",
          "value": "nav-link"
        }
      ]
    },
    {
      "text": "Home2",
      "linkUrl": "/home/index",
      "linkAttributes": [
        {
          "name": "class",
          "value": "nav-link"
        }
      ]
    }

User may also change menu and sub-menu items HTML text based on json templates as mentioned here:

'itemTemplate': '<li {0}>{1}</li>',
'linkTemplate': '<a {0} href='{1}'>{2}</a>',
'linkNavigationTemplate': '<a {0} href='#account-settings' class='nav-link dropdown-toggle' data-toggle='collapse' 
                                     role='button' aria-haspopup='true' aria-expanded='false'>{1} <span class='{2}'></span></a>',
'subNavigationTemplate': '<ul id='account-settings' class='dropdown-menu'>{0}</ul>\n',

Review json files for complete script.

Note data-toggle='collapse' has been replaced with data-bs-toggle='collapse' attribute.

Composing Menu

Menu composition is very simple invoke following method with references to json files and get your dynamic navigation menu.

@Html.Raw(WindnTrees.Controls.Standard.Bootstrap.Navbar.NavigationComposer.composeFromJson(new string[] {
                    ENV.ContentRootPath + "\\navigations\\navigation1.json",
                    ENV.ContentRootPath + "\\navigations\\navigation2.json"
                    },
                    User.Identity.Name, new string[] {"role1","role2"}, null, null, "4.0"))

Refer _Layout.cshtml file project source code.

Authorizing Links and Menu Items

WindnTrees navigation control enable menu with authorized links and menu items based on user roles.

  {
      "text": "Home1",
      "linkUrl": "/home/index",
      "linkAttributes": [
        {
          "name": "class",
          "value": "nav-link"
        }
      ]
	"roles": [ "signin" ]
    },

For example until you "signin" role allow links for anonymous users that are denied to authorized users, where as "anonymous" role display menu links and items without the effect of authorization. User may attach links and menu items with personal roles like "myaccount" and "admin" to show and hide menu items according to their needs. Refer json files in project source code.

Summary

WindnTrees.Controls.Standard simplifies the construction of navigation menu for your asp .net website and support multi-level menus and their customization via templates. Download project code here, this demonstrates regular and sidebar navigation implementation through code behind data structuring.