Responsive tabs with dropdown menu
Provide a reponsive tab menu that gracefully overflows into a dropdown.
Demo: http://digitalfondue.ch/df-tab-menu/
$ bower install df-tab-menu
Once installed, add df-tab-menu as a dependency in your module:
angular.module('myModule', ['digitalfondue.dftabmenu']);
- AngularJS v1.2.0+ is supported
Example
<ol df-tab-menu menu-control="{{navigationState}}">
<li data-menu-item="state1"><a data-ng-href="#"><span>Item 1</span></a></li>
<li data-menu-item="state2"><a data-ng-href="#"><span>Item 2</span></a></li>
<li data-more-menu-item><a data-ng-href="#">More +</a></li>
</ol>
- only ol and ul are valid root elements
- menu-control is used to control which tab item is the current one. It can be anything available in your scope. Example: using ui-router state name
$scope.navigationState = $state.current.name;
- each data-menu-item refers to a possible state provided by menu-control. If a state is invalid, an exception is throw, and the directive will fail to render correctly
- data-more-menu-item is used to generate the dropdown entry when that contains the menu items overflow.
- bootstrap tab classes can be added via the attribute theme="bootstrap" on the root element
- If you would like to add bootstrap classes to only the dropdown menu you can use theme-drop-down-menu="bootstrap"