Base solution for your next web application
Open Closed

How to implement sub-menu on navbar? #60

User avatar
0
lcyhjx created

Thanks Asp.Net Boilerplate first. I create a sample project from <a class="postlink" href="http://www.aspnetboilerplate.com">http://www.aspnetboilerplate.com</a> by using AngulatJS and Entity Framework, then I would like to change the navrbar with sub-menu as following: • Order • Report • Administration o User management (this is a sub-menu under Administration menu) So I make following changes in Navigation Provider class

context.Manager.MainMenu
                .AddItem(
                    new MenuItemDefinition(
                        "Order",
                        new LocalizableString("Order", BOMConsts.LocalizationSourceName),
                        url: "#/",
                        icon: "fa fa-tasks"
                        )
                )
                .AddItem(
                    new MenuItemDefinition(
                        "Report",
                        new LocalizableString("Report", BOMConsts.LocalizationSourceName),
                        url: "#/Report",
                        icon: "fa fa-bar-chart"
                        )
                )
                .AddItem(
                new MenuItemDefinition(
                    "Administration",
                    new LocalizableString("Administration", BOMConsts.LocalizationSourceName),
                    icon: "fa fa-cogs"
                    ).AddItem(
                        new MenuItemDefinition(
                            "UserManagement",
                            new LocalizableString("UserManagement", BOMConsts.LocalizationSourceName),
                           // url: "/Administration/Users",
                            icon: "fa fa-users"
                            )
                    )
                );

But when I run the project, the sub-menu 'User Management' does not display. Could you please let me know what am I missing? It is better to give me a sample code if it is possible, thanks.

Go to accepted answer
6 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    If you're using the project template, sub-menu is not implemented there. If you're using the angular version, go to App/Main/views/layout/header.cshtml and implement it yourself. Also, you can find any other top menu. Project template is just a startup helper. You can freely extend it.

    This is the view code generated the menu:

    <li ng-repeat="menuItem in vm.menu.items" ng-class="{active: vm.currentMenuName == menuItem.name}">
	<a ng-href="{{menuItem.url}}"><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> {{menuItem.displayName}}</a>
</li>

    You see that it's single-levet. But actually every MenuItem has items array. So, you can use menuItem.items to create child menus.

    You can find example multi-level bootstrap menus (like <a class="postlink" href="http://bootsnipp.com/snippets/featured/multi-level-navbar-menu">http://bootsnipp.com/snippets/featured/ ... avbar-menu</a>).

  • User Avatar
    0
    lcyhjx created

    Thanks. I will try.

  • User Avatar
    0
    lcyhjx created

    a sample for building sub-menu Question Administration ----Users

    Sample code in NavigationProvider

    context.Manager.MainMenu
                .AddItem(
                    new MenuItemDefinition(
                        "Questions",
                        new LocalizableString("Questions", BOMConsts.LocalizationSourceName),
                        url: "#/questions",
                        icon: "fa fa-question"
                        )
                )
                 .AddItem(
                 new MenuItemDefinition(
                    "Administration",
                    new LocalizableString("Administration", BOMConsts.LocalizationSourceName),
                    url:"",
                    icon: "fa fa-cogs"
                    ).AddItem(
                        new MenuItemDefinition(
                            "Users",
                            new LocalizableString("Users", BOMConsts.LocalizationSourceName),
                            url: "#/users",
                            icon: "fa fa-users"
                            )
                    )
                );

    Routing in app.js:

    //Configuration for Angular UI routing.
    app.config([
        '$stateProvider', '$urlRouterProvider',
        function($stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/questions');
            $stateProvider
                .state('questions', {
                    url: '/questions',
                    templateUrl: abp.appPath + 'App/Main/views/questions/index.cshtml',
                    menu: 'Questions' //Matches to name of 'Questions' menu in BOMNavigationProvider
                })
                .state('questionDetail', {
                    url: '/questions/:id',
                    templateUrl: abp.appPath + 'App/Main/views/questions/detail.cshtml',
                    menu: 'Questions' //Matches to name of 'Questions' menu in BOMNavigationProvider
                })
                .state('users', {
                    url: '/users',
                    templateUrl: abp.appPath + 'App/Main/views/users/index.cshtml',
                    menu: 'Users' //Matches to name of 'Users' menu in BOMNavigationProvider
                });
        }
    ]);

    layout/header.cshtml

    <ul class="nav navbar-nav">
                <li ng-repeat="menuItem in vm.menu.items" ng-class="{active: vm.currentMenuName == menuItem.name}">

                    <a ng-if="menuItem.items.length==0" ng-href="{{menuItem.url}}"><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> {{menuItem.displayName}}</a>

                    <a ng-if="menuItem.items.length>0" href="" data-toggle="dropdown"><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i> {{menuItem.displayName}} </a>
                    <ul ng-if="menuItem.items.length>0" class="dropdown-menu">
                        <li ng-repeat="menuSubItem in menuItem.items">
                            <a ng-href="{{menuSubItem.url}}"><i class="{{menuSubItem.icon}}" ng-if="menuSubItem.icon"></i> {{menuSubItem.displayName}}</a>
                        </li>
                    </ul>

                </li>
            </ul>
  • User Avatar
    0
    hikalkan created
    Support Team

    Thanks a lot for sharing. I will redirect if someone ask same question :)

  • User Avatar
    0
    hikalkan created
    Support Team

    I included it to startup template. <a class="postlink" href="http://www.aspnetboilerplate.com/Templates">http://www.aspnetboilerplate.com/Templates</a>

    Thanks again.

  • User Avatar
    0
    charl created

    Thank you so much for Re-posting this :D

Assignee
No one
Labels
None yet