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!
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>
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';
});
