Responsive dropdown navbar with angular-ui bootstrap done in the correct angular kind of way

Question

I ve created a JSFiddle with a dropdown navbar using angular-ui-boostrap s module  ui bootstrap dropdownToggle   http   jsfiddle net mhu23 2pmz5    lt div class  navbar navbar-fixed-top  gt   lt div class  navbar-inner  gt       lt div class  container  gt   lt a class  brand  href     gt                  My Responsive NavBar              lt  a gt            lt ul class  nav  gt               lt li class  divider-vertical  gt  lt  li gt               lt li class  dropdown  gt   lt a href     class  dropdown-toggle  gt                          Menu 1  lt b class  caret  gt  lt  b gt                       lt  a gt                    lt ul class  dropdown-menu  gt                       lt li gt  lt a href    list  gt Entry 1 lt  a gt                       lt  li gt                       lt li gt  lt a href    list  gt Entry 2 lt  a gt                       lt  li gt                   lt  ul gt               lt  li gt                          lt  ul gt       lt  div gt   lt  div gt   lt  div gt    As far as I understand this is the proper  angular kind of way to implement such a dropdown menu  The  wrong  way  in terms of angularjs  would be to include bootstrap js and to use  data-toggle  dropdown     Am I right here   Now I d like to add responsive behaviour to my navbar as done in the following Fiddle  http   jsfiddle net ghtC9 6   BUT  there s something I don t like about the above solution  The guy included bootstrap js   So what would be the correct angular kind of way to add responsive behaviour to my existing navbar   I obviously need to use bootstraps responsive navbar classes such as  nav-collapse collapse navbar-responsive-collapse   But I don t know how     I d really appreciate your help   Thank you in advance  Michael

User · Answer

My solotion for responsive dropdown navbar with angular-ui bootstrap  when  update to angular 1 5 and  ui-bootrap 1 2 1  index html                       lt link rel  stylesheet  href   css app css  gt   lt  head gt   lt body gt     lt nav class  navbar navbar-inverse navbar-fixed-top  gt           lt div class  container  gt               lt input type  checkbox  id  navbar-toggle-cbox  gt               lt div class  navbar-header  gt                   lt label for  navbar-toggle-cbox  class  navbar-toggle                          ng-init  navCollapsed   true                          ng-click  navCollapsed    navCollapsed                           aria-controls  navbar  gt                       lt span class  sr-only  gt Toggle navigation lt  span gt                       lt span class  icon-bar  gt  lt  span gt                       lt span class  icon-bar  gt  lt  span gt                       lt span class  icon-bar  gt  lt  span gt                   lt  label gt                   lt a class  navbar-brand  href     gt Project name lt  a gt                    lt div id  navbar  class  collapse navbar-collapse   ng-class    in   navCollapsed   gt                       lt ul class  nav navbar-nav  gt                           lt li class  active  gt  lt a href   view1  gt Home lt  a gt  lt  li gt                           lt li gt  lt a href   view2  gt About lt  a gt  lt  li gt                           lt li gt  lt a href     gt Contact lt  a gt  lt  li gt                           lt li uib-dropdown gt                               lt a href     uib-dropdown-toggle gt Dropdown  lt b class  caret  gt  lt  b gt  lt  a gt                               lt ul uib-dropdown-menu role  menu  aria-labelledby  split-button  gt                                   lt li role  menuitem  gt  lt a href     gt Action lt  a gt  lt  li gt                                   lt li role  menuitem  gt  lt a href     gt Another action lt  a gt  lt  li gt                                                                  lt  ul gt                           lt  li gt                        lt  ul gt                    lt  div gt               lt  div gt           lt  div gt       lt  nav gt    app css     show the collapse when navbar toggle is checked     navbar-toggle-cbox checked    collapse       display  block        the checkbox used only internally  don t display it     navbar-toggle-cbox     display none

User · Answer

Update 2015-06  Based on antoinepairet s comment example   Using uib-collapse attribute provides animations  http   plnkr co edit omyoOxYnCdWJP8ANmTc6 p preview    lt nav class  navbar navbar-default  role  navigation  gt       lt div class  navbar-header  gt            lt  -- note the ng-init and ng-click here  -- gt           lt button type  button  class  navbar-toggle  ng-init  navCollapsed   true  ng-click  navCollapsed    navCollapsed  gt               lt span class  sr-only  gt Toggle navigation lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt               lt span class  icon-bar  gt  lt  span gt           lt  button gt           lt a class  navbar-brand  href     gt Brand lt  a gt       lt  div gt        lt div class  collapse navbar-collapse  uib-collapse  navCollapsed  gt           lt ul class  nav navbar-nav  gt                       lt  ul gt       lt  div gt   lt  nav gt      Ancient    I see that the question is framed around BS2  but I thought I d pitch in with a solution for Bootstrap 3 using ng-class solution based on suggestions in ui bootstrap issue 394    The only variation from the official bootstrap example is the addition of ng- attributes noted by comments  below    lt nav class  navbar navbar-default  role  navigation  gt     lt div class  navbar-header  gt        lt  -- note the ng-init and ng-click here  -- gt       lt button type  button  class  navbar-toggle  ng-init  navCollapsed   true  ng-click  navCollapsed    navCollapsed  gt         lt span class  sr-only  gt Toggle navigation lt  span gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt         lt span class  icon-bar  gt  lt  span gt       lt  button gt       lt a class  navbar-brand  href     gt Brand lt  a gt     lt  div gt      lt  -- note the ng-class here -- gt     lt div class  collapse navbar-collapse  ng-class    in   navCollapsed   gt        lt ul class  nav navbar-nav  gt            Here is an updated working example  http   plnkr co edit OlCCnbGlYWeO7Nxwfj5G p preview  hat tip Lars   This seems to works for me in simple use cases  but you ll note in the example that the second dropdown is cut off     good luck

User · Answer

Not sure if anyone is having the same responsive issue  but it was just a simple css solution for me   same example       ng-init  isCollapsed   true  ng-click  isCollapsed    isCollapsed  gt           div collapse  isCollapsed  gt        with   media screen and  min-width  768px         collapse          display  block  important

User · Answer

You can do it using the  collapse  directive  http   jsfiddle net iscrow Es4L3   check the two  Note  in the HTML             lt  -- Note  set the initial collapsed state and change it when clicking -- gt           lt a ng-init  navCollapsed   true  ng-click  navCollapsed    navCollapsed  class  btn btn-navbar  gt              lt span class  icon-bar  gt  lt  span gt              lt span class  icon-bar  gt  lt  span gt              lt span class  icon-bar  gt  lt  span gt           lt  a gt           lt a class  brand  href     gt Title lt  a gt              lt  -- Note  use  collapse  here  The original  data-  settings are not needed anymore  -- gt              lt div collapse  navCollapsed  class  nav-collapse collapse navbar-responsive-collapse  gt                 lt ul class  nav  gt    That is  you need to store the collapsed state in a variable  and changing the collapsed also by  simply  changing the value of that variable     Release 0 14 added a uib- prefix to components   https   github com angular-ui bootstrap wiki Migration-guide-for-prefixes  Change  collapse to uib-collapse

[angularjs] Responsive dropdown navbar with angular-ui bootstrap (done in the correct angular kind of way)

Examples related to angularjs

Examples related to angular-ui

Examples related to angular-ui-bootstrap