How to do dropdown item on navbar with material angular

javascript css angularjs navbar angular-material

21,272

Solution 1

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

Solution 2

"CREATING YOUR OWN ANGULAR MATERIAL NAVIGATION MENU"

I hope this blog might help you, please visit here

See working plunkr

Solution 3

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 ;)

21,272

Author by

jyDev

Updated on March 02, 2020

Comments

jyDev about 4 years

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!
jyDev about 9 years

Thank you!! Really helpful :)