How to do dropdown item on navbar with material angular

Question

I'm using Angularjs with googles Material Angular library https://material.angularjs.org/

They have drop down items in the navbar on their site, but I can't find any object or example to make one of my own.

How can I achieve this?

Thank you!

Answer 1

A Simple One, I made this on my own. using Angular material library

You Can Do it Just Using Md list item and Couple of directives, like ng-show, ng-class.

Here I am keeping track of active menu item in controller.

https://github.com/mtushar091/angularjs_sideMenu

Sidemenu.png

        <md-list ng-repeat="menu in menus" class="list_no_padding manu_container">

        <!-- MAIN MENU ITEMS -->
        <md-list-item  
            ng-click="parentMenuAction(menu)"
            class="menu_item"
            ng-class="{active: menu === activeMenu}">
                <md-icon md-svg-icon="res/icons/{{menu.icon}}"></md-icon>
                <p>{{menu.name}}</p>
                <span flex></span>
                <md-icon
                    md-svg-icon="res/icons/ic_keyboard_arrow_right_24px.svg"
                    ng-click="parentMenuAction(menu)"
                    ng-show="menu.items.length != 0"
                    class="nav_icon md-toggle-icon"
                    aria-hidden="true">
                </md-icon>
        </md-list-item>
        <!-- SUB MENU ITEMS -->
        <md-list-item 
            ng-repeat="item in menu.items"
            ng-click="chieldMenuAction(item)"
            ng-show="menu === activeMenu"
            class="sub_menu_item animate-show-hide"
            ng-class="{'sub_active': item === activeSubMenu}">
                <p>{{item.name}}</p>
        </md-list-item>

    </md-list>

---

// Init Default Active Item...
$scope.activeMenu = { };
$scope.activeSubMenu = { };

// Sidenav Toggle
$scope.toggle = function() { $mdSidenav('left').toggle(); };

 $scope.menus = [
    { 
        icon: "ic_apps_24px.svg",
        name: "Tables",
        state: "home.table",
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    {   icon: "ic_attach_file_24px.svg", name: "Reminders", items : [] },
    { 
        icon: "ic_archive_24px.svg",
        name: "Inspriation", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    { 
        icon: "ic_apps_24px.svg",
        name: "Notes", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    {   icon: "ic_attach_file_24px.svg", name: "Reminders", items : [] },
    { 
        icon: "ic_archive_24px.svg",
        name: "Inspriation", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    { 
        icon: "ic_battery_30_24px.svg",
        name: "Personal", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    },
    { 
        icon: "ic_archive_24px.svg",
        name: "Inspriation", 
        items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}] 
    }
];


// MENU ITEM NAVIGATION ....................................
$scope.parentMenuAction = function(menu) {
    //Set as Active Menu or Remove as Active menu
    $scope.activeMenu = (menu === $scope.activeMenu) ? {} : menu;

    // Other Things to Do When Parent Manu is Clicked ...
    console.log('Active Menu ' + $scope.activeMenu.name);
    $state.go(menu.state);

};



// SUB MENU ITEM NAVIGATION ..............................
$scope.chieldMenuAction = function(item) {
    // Set As Active SubMenu Item
    $scope.activeSubMenu = item;

    console.log('Active SubMenu ' + $scope.activeSubMenu);
}

Answer 2

Just in case someone else lands in this, it would be worth it to know that this can be done rather easily with the help of Angular ngHide and ngShow directives. Any embellishments such as icons, styles, animations, etc can be added to it, yet the functionality is pretty straight forward if you do it this way:

Here is your template for one single menu tier (toggle item and submenu items)

<md-button ng-click="menuIsOpen = !menuIsOpen" layout="row"> Trigger</md-button>
<ul ng-init="menuIsOpen= false" ng-show="menuIsOpen">
    <md-menu-item ng-repeat="item in data">
        <md-button>
            <div layout="row" flex="">
                <a ui-sref="{{item.link}}" class="">
                    <p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
                </a>
            </div>
        </md-button>
    </md-menu-item>
</ul>

And here is what it could possibly be the most simple controller you'll ever see, although this would be better if it was in it's own json file ;)

.controller('ListBottomSheetCtrl', function($scope) {
    $scope.data = [{
        title: 'Home',
        icon: 'home',
        link: '/page1/'
    }, {
        title: 'Email us',
        icon: 'envelope',
        link: '/page2/'
    }, {
        title: 'Profile',
        icon: 'user',
        link: '/page3/'
    }, {
        title: 'Print',
        icon: 'print',
        link: '/page4/'
    }, ];

})

You may find it working here

See! Easy! No need to go all crazy, easy does it in programming. For the sale of maintainability ;)

Answer 3

"CREATING YOUR OWN ANGULAR MATERIAL NAVIGATION MENU"

I hope this blog might help you, please visit here

See working plunkr

Answer 4

Angular Material Side Menu you could use below code

Markup

<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" 
 md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">

  <md-list>
  <md-item ng-repeat="item in menu">
    <a>
      <md-item-content md-ink-ripple layout="row" layout-align="start center" ng-click="$parent.navigate(item.icon)">
        <div class="inset">
           <ng-md-icon icon="{{item.icon}}"  ></ng-md-icon>
           <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>
        </div>

      </md-item-content>
       <md-divider></md-divider>
    </a>
  </md-item>
  <md-divider></md-divider>

  <md-item ng-repeat="item in admin">
    <a>
      <md-item-content md-ink-ripple layout="row" layout-align="start center">
        <div class="inset">
          <ng-md-icon icon="{{item.icon}}"></ng-md-icon>
           <md-tooltip   md-direction="right">{{item.title}}</md-tooltip>
        </div>

      </md-item-content>
    </a>
  </md-item>
</md-list>
</md-sidenav>

Plunkr

I could give you the idea about md-select which will be act as drop-down.

Markup

<body data-ng-controller="MainCtrl">
    <h1>md-select demo</h1>
    <md-select ng-model="widgetType" >
        <md-option ng-value="t.title" data-ng-repeat="t in widget">{{ t.title }}</md-option>
    </md-select>
</body>

Controller

var app = angular.module('DemoApp', ['ngMaterial']);

app.controller('MainCtrl', function($scope) {
  $scope.widget = [{
    "id": "line",
    "title": "Line"
  }, {
    "id": "spline",
    "title": "Smooth line"
  }, {
    "id": "area",
    "title": "Area"
  }, {
    "id": "areaspline",
    "title": "Smooth area"
  }];

  //init
  $scope.widgetType = 'Line';

});

Working Plunkr