responsive navbar

[acornejo]

The documentation doesn't show how to use the responsive navbar feature in bootstrap.

This feature allows the links in the navbar to be "collapsed" in small screens, and the click of a button allows these links to be displayed again (below the navbar).

I thought the "collapse" part of bootstrap-ui would work, but it doesn't work (at least not out of the box). Googling I found several other people with the same problem, but there seems to be no good answer.

For reference see this question on stackoverflow (not mine):

http://stackoverflow.com/questions/16268606/responsive-dropdown-navbar-with-angular-ui-bootstrap-done-in-the-correct-angula

Also, someone suggested a solution in a blog post:

http://frankapi.wordpress.com/2012/12/04/responsive-bootstrap-and-angularjs-routing/

However, that requires jquery + bootstrap.js, so its not for ui-bootstrap.

[amitava82]

It works. Please check here for demo: http://plnkr.co/edit/juQeWZW6HUvmhKfIFCBg?p=preview

[acornejo]

@amitava82 thank you. I like your solution, I wasn't aware of the "class=expression" syntax to conditionally assign classes (is this documented somewhere?).

My solution used ng-class, something like: ng-class="!isCollapsed && 'in'", and the "collapsed" class is applied unconditionally (however, I am working with bootstrap 3.0-wip, which may have a slightly different syntax than the stable version).

I think it would be nice to have this example in the docs, and by the stackoverflow questions at least a couple of other people would have found it useful.

[ajoslin]

I don't think we'll be adding a navbar directive.

[ajoslin]

If you want to add it to the docs, please open a PR :-D

[ptim]

I'm not quite up to adding this to the docs at present, but for those who come after here is a plunkr which implements @acornejo's ng-class solution: http://plnkr.co/edit/ogWM29?p=preview

[gdennie]

Since bootstrap is a de-facto industry standard, it seems wise for bootstrap-ui to remain component compatible; as an industry standard, bootstrap is probably the prototypical GUI language and bootstrap-ui, being that is so easy to do, should not want to force a 'design meeting'

...once I get good at angular, I might add it....Hurray for opensource!

[davisford]

Broken with angular-ui 12.0 -- here's a fork of the plunk above that just changes angular-ui to release 12. While the collapse directive still works, the dropdown no longer does (try and expand the submenus).

http://plnkr.co/edit/ShQXLdZFIYCP4ExcIPGa?p=preview

Looking for a solution.

[antoinepairet]

@davisford Please read the release note of 0.12 and the list of breaking changes: https://github.com/angular-ui/bootstrap/blob/master/CHANGELOG.md#breaking-changes
The dropdown directives are no longer class directive. They need to be set as attribute.

Here is a working plunker: http://plnkr.co/edit/by9bV5jBA4Qn8VASfw08?p=preview

[luckylooke]

Thank you @antoinepairet! Best solution I have found ;)

[krnlde]

This issue is really annoying and tbh ng-class="!navCollapsed && 'in'" is a hack to get back what twbs already gave us - that's not a satisfying solution. Missing animations, even less bootstrap docs conformity than it already was before. But yeah, I guess closing this issue means solved.