How to add a line break in ASP.NET Boilerplate menu from Navigation Provider with localization

Question

I have defined menu items using the Navigation Provider with localization. How can I add a line break in the middle of the menu name?

Navigation Provider

public override void SetNavigation(INavigationProviderContext context)
    {
        context.Manager.MainMenu
            .AddItem(
                new MenuItemDefinition(
                    "Menu Item",
                    new LocalizableString("MenuItem", MyAppConsts.LocalizationSourceName),
                    url: "#/menuitem",
                    icon: "fa fa-clipboard"
                    )
            );
    }

My Localization Source File

    <?xml version="1.0" encoding="utf-8" ?>
    <localizationDictionary culture="en">
      <texts>
        <text name="MenuItem" value="Menu Item" />
      </texts>
    </localizationDictionary>

cshtml file where the menu is created

<div class="sidebar-inner">

            <nav>
                <ul class="nav nav-sidebar">
                    <li ng-repeat="menuItem in vm.menu.items" ng-class="{active: vm.currentMenuName == menuItem.name}" class="nav-parent">
                        <a ng-if="!menuItem.items.length" ng-href="{{menuItem.url}}"><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i><span>{{menuItem.displayName}}</span><span class="fa arrow"></span></a>
                        <a ng-if="menuItem.items.length" href="" ><i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i><span>{{menuItem.displayName}}</span><span class="fa arrow"></span></a>
                        
                        <ul ng-if="menuItem.items.length" class="children collapse">
                            <li ng-repeat="menuSubItem in menuItem.items">
                                <a ng-href="{{menuSubItem.url}}"><span>{{menuSubItem.displayName}}</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>
 </div>

I want it shown like

 Menu
 Item

Not like this

Menu Item

Thank you in advance.

Did you try using css ? Is there any specific reason why you dont want to use css ? — Manoj Choudhari, Mar 11 '19 at 06:03
If you using abp templates there is a view for navigation component in `Views\Shared\Components\SideBarNav` you can get help from it. — isaeid, Mar 11 '19 at 06:06
@ManojChoudhari Because in the ASP.NET Boilerplate template I can use the in built menu? — Pabasara Mahindapala, Mar 11 '19 at 06:09
Oh, i am so sorry, i think i did not understand you correctly, you want to show an menu item in two lines. if you want that. it is possible to change " " in "menu item" in show time to "
". Is not responsive to you? — isaeid, Mar 11 '19 at 07:19
No that doesn't work for me because I'm supposed to pass the display name of the menu from the XML source file in ``. — Pabasara Mahindapala, Mar 11 '19 at 07:22

score 1 · Answer 1 · answered Mar 11 '19 at 07:53

1

Try add an split filter to angular, and change your code to:

<span>{{menuSubItem.displayName | split:' ':0}}<br /> {{menuSubItem.displayName | split:' ':1}}</span>

See How to split a string with angularJS to how to add split filter.

answered Mar 11 '19 at 07:53

isaeid

543
5
26

Thank you very much! Using split is the answer. Now it's working fine but I want to chose the menu items which I need to display in two lines. – Pabasara Mahindapala Mar 13 '19 at 07:52
Angular has if-else. try use it in span. – isaeid Mar 13 '19 at 10:18

score 0 · Answer 2 · answered Mar 11 '19 at 06:15

0

As you can see in the file i said in comments, there is an ul-li tags to creating menu, which means you can change the view decoration with css.If you using bootstrap simply change <div class="menu"> to <nav class="navbar navbar-default"> and change <ul class="list"> to <ul class="nav navbar-nav">.

answered Mar 11 '19 at 06:15

isaeid

543
5
26

Sorry I can not find the file you said SideBarNav. I have edited my question with the menu definition. – Pabasara Mahindapala Mar 11 '19 at 06:33
Sorry, SideBarNav is a folder wich contains a viewcomponent to create a side bar navigation. In that viewcomponent we can see an implementation of navigator with abp's system. – isaeid Mar 11 '19 at 07:10

Pabasara Mahindapala · Accepted Answer · 2019-03-13T08:10:47.347

I have figured it out using string split. In the XML source I have added a '$' where I want to break the menu name into two lines.

<texts>
    <text name="MenuItem1" value="Long$Name" />
    <text name="MenuItem2" value="Short Name" />
</texts>

Then I used string split to break the menu display name into two and displayed it in two lines with
tag.

<a ng-if="!menuItem.items.length" ng-href="{{menuItem.url}}">
       <i class="{{menuItem.icon}}" ng-if="menuItem.icon"></i>
       <span>
          {{menuItem.displayName.split('$')[0]}} <br> {{menuItem.displayName.split('$')[1]}}
       </span><span class="fa arrow"></span>
</a>

How to add a line break in ASP.NET Boilerplate menu from Navigation Provider with localization

3 Answers3