Menus

Building menu areas in meanbase is simply creating a sortable list and adding a few attributes.

<ul class="nav navbar-nav" ng-sortable="$root.menusConfig">
    <li ng-repeat="menu in menus.main" ng-class="{'mb-draggable': $root.editMode}">
        <a target="{{menu.target}}" class="mb-link" ng-class="{{menu.classes}}" ng-click="handleClick($event, menu, menu.url)">{{menu.title}}</a>
    </li>
    <li mb-add-menu-item="main" class="new-menu-item-button ignore-draggable">
      <a>Add Link</a>
    </li>
</ul>

The list

The heart of creating menus is a list

ng-repeat="menu in menus.main"

In menus.main, the "main" is the name of the menu area. This could be whatever you want... menus.headerMenus1, but it tells the page where to place menus on your site in the case you have multiple menu areas. Every theme must support a main menu if you want data imports or newly created pages to show up in the menu.

The actual link

The next bit is necessary for links to work properly.

<a target="{{menu.target}}" class="mb-link" ng-class="{{menu.classes}}" ng-click="handleClick($event, menu, menu.url)">{{menu.title}}</a>

Setting the target is necessary in case we have links that go to pages outside our site. Menu classes are important so classes that users add the in the dialog will show up in the menu.

handleClick

ng-click="handleClick($event, menu, menu.url)"

handleClick is necessary, because when in edit mode it will open up an edit dialog while in presentation mode it will visit the link.

We display our menu label with {{menu.title}}

mb-add-menu-item="main"

<li mb-add-menu-item="main" class="new-menu-item-button ignore-draggable">
  <a>Add Link</a>
</li>

mb-add-menu-item="main"

Adds a menu to the group specified (main). Ignore draggable makes the element not trigger dragging.

Sortable menus

Finally

<ul class="nav navbar-nav" ng-sortable="$root.menusConfig">

makes the menus sortable. You should always use $root.menusConfig as your sortable list for menus.

ng-class="{'mb-draggable': $root.editMode}"

must be added to the items you want to be draggable.