Navbar N-Level Dropdown Menus

jonny827 commented 8 years ago

Question

Does MopaBootstrapBundle 3.x support N-Level Navbars with KNPMenuBundle out of the box with Bootstrap 3.3.x and (ideally 4.x as well)?

Background

1. I read that boostrap 3.x no longer supports sub-meu. - here

Thoughts One solution mentioned mentioned here does not modify core files, however, solo contributor, last update was over 2 years ago, and Bootstrap 4.x is already on the way.

A second solutuion was Smart Menus It does not modify core files, solo contributor with January 27th 2016 as last commit.

The other solutions were very one off/hackish(yes, I know we are developers), however, I believe that if we are creating bundles, they might as well be sustainable and use best practices even if that means collaborating where weaknesses or lack of functionality may exist.

2. A) I read here that bootstrap author Mark Otto sais- "Submenus just don't have much of a place on the web right now, especially the mobile web. They will be removed with 3.0"

B) Acording to @isometriks (2nd place contributor of MopaBootstrapBundle at time of question) here "If you really need more than one nav bar on a page which I don't think is a common use case, you can just copy the contents of that template and just add it yourself. Or create your own template and then embed that. "

Thoughts If submenus dont have a place, and if we "really dont need more than one" navbar(I presume he is also including subnavigation in this) then are we to use tag clouds or seach or search engines to navigate the content on our websites?

3. There are features of SmartMenus that MopaBootstrapBundle does not currently have like @auipga https://github.com/phiamo/MopaBootstrapBundle/pull/1155 has mentioned one.

Thoughts Why not allow MopaBootstrapBundle to be the Symfony2/3 Bridge for SmartMenus? This would allow you to offload Navbar feature expansion to another project and you just provide the bridge as you currently do with Bootstrap.

Problem

I am building a site that requires several levels of a menu. For simplicity, think of a CMS or E-Commerce Bundle with several levels of Pages or Product Categories. I tried to just have a number of main Parent(children of the roots) with a single level of dropdowns below it(for each category of features) but then my Navbar becomes two rows of Parent nodes(and more to come as features expand)

I tried the below code to build the menus. I see the navbar but all I see is the main First Level and when I hover it shows me the Second level but that is it. When I hover over the Second level it does NOT expose the third level or anything..

Note: I tried both methods of developing the menu array.

1) Approach 1 - MopaBootstrapBundle OOP Style here: (http://bootstrap.mohrenweiserpartner.de/mopa/bootstrap/navbar)

2) Approach 2 - KNPMenuBundle suggests the array format (a least for level two) as exampled here (https://github.com/KnpLabs/KnpMenuBundle/blob/master/Resources/doc/index.rst)

Code

    $second = $menu->addChild('First', array( 'dropdown' => true, 'caret' => true))->setExtra('weight', 10);
    $third = $second->addChild('Second', array( 'dropdown' => true, 'caret' => true))->setExtra('weight', 10);
    $fourth = $third->addChild('Third', array( 'dropdown' => true, 'caret' => true))->setExtra('weight', 10);
    $fifth = $fourth->addChild('Fourth', array( 'dropdown' => true, 'caret' => true))->setExtra('weight', 10);

    $menu->addChild('2First', array( 'dropdown' => true, 'caret' => true))->setExtra('weight', 100);
    $menu['2First']->addChild('Second', array('dropdown' => true, 'caret' => true))->setExtra('weight', 10);
    $menu['2First']['Second']->addChild('Third', array('dropdown' => true, 'caret' => true))->setExtra('weight', 100);
    $menu['2First']['Second']['Third']->addChild('Fourth', array('dropdown' => true, 'caret' => true))->setExtra('weight', 10);

Bundles/Libraries

MopaBootstrapBundle dev-master(04/24/2016) Boostrap-Saas : dev-master(04/24/2016)

JQuery: 2.2.3 Bootstrap 3.3.6 Font Awesome 4.3.0 Moment 2.13

I understand I am using dev build on the bundles but my hope was that any bugs found since version 3.0.0's release may have been patched since it was almost 6 months ago. Also, I was hoping this issue had come up in the past(does not seem to have from the issues search) and it may have been discussed and or resolved. I apologize it has and apologize for the length of this issue(possible feature request) however I tried to keep it as concise as possible.

Summary

In a maintainable way(part of bundle or active library) does MopaBootstrapBundle 3.x support N-Level Navbars with KNPMenuBundle out of the box with Bootstrap 3.3.x and (ideally 4.x as well)?

isometriks commented 8 years ago

My response was just that having two actual navbars with the hamburger collapse button etc, isn't a common use-case. Which is not to say it's not possible to even still do with this bundle. We just provide that base template to embed as a shortcut which works in most cases. I myself use multiple menus, for instance a main menu, and then a second pulled-right menu as a user menu which may or may not be rendered depending on if the user is logged in. You can copy: https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/views/Navbar/navbar.html.twig or use it as an example and customize however you want. My point in that other issue was just that I don't want that one template to be completely customizable in every aspect as it ruins DX and gets really confusing. If that template doesn't meet you needs you should create your own (which would solve the problem from that issue).

I will have to see what @phiamo thinks, but we have been trying to keep features like this out of the scope of this project as it just becomes way too many things to maintain and to keep up with other bundles. KNPMenu already supports as many levels deep as you want to go, and you can customize the twig file that it outputs (here's ours for example to add icons / carets: https://github.com/phiamo/MopaBootstrapBundle/blob/master/Resources/views/Menu/menu.html.twig) and you could make any of the above libraries work with your menus.

I wouldn't be totally against adding maybe another twig file to the menu folder so the markup is there but we are trying to avoid adding any external javascript / css to this repository going forward. If Bootstrap 4 does support natively more than 2 levels then we will definitely be having that feature. We're just valuing having a less feature-rich well working bundle than to try to do much and do each thing sort of okay.

jonny827 commented 8 years ago

A) @isometriks Thank you for such a quick reply to my inquiry. Thank you for clarifying your comment. I agree that adding undue complexity to a template that in 95%+ of use cases is problematic.

B) I completely understand that you would want to keep the bundle isolated and on it's own release schedule (presumably aligning somewhat with Bootstrap major versions) and of course following Symfony requirements. Thankfully, SmartMenus does not require any markup other than default Despite there being some documented requirements for data-target=".navbar-collapse" which is different than MopaBootStrapBundle Template it still works so there is no need for a custom template. NOTE: I have NOT tried any of SmartMenus added features so this may change my above statement.

C) KNPMenu and KNPMenuBundle and any developers utilizing Bootstrap 3.x for menus would also benefit from using SmartMenus (it acts like a wonderful polyfill for the bootstrap 3.x N-Level Menu Limitation). It works with KNPMenuBundle out of the box as well.

D) Mopa makes it better by providing active class, carets for parent dropdowns, 3(THREE) ICON Libraries to chose from integrated, and all its other features!

E) Would it be good to document that you can use SmartMenus as polyfill the Bootstrap 3.x 2 Level Menu limitation for MopaBootstrapBundle Menus (and others like mentioned above)?

F) Sorry it has taken me a moment to clean up my reply and finish some of my testing and finalization of building. I also created a larger discussion @Security Annotation Driven Weighted N-Level Bootstrap Menus #320

garak commented 7 years ago

I just stumbled upon this issue, looking for a solution to use multi-level menus with KnpMenuBundle. I managed to get it working using CSS from https://codepen.io/ajaypatelaj/pen/prHjD and submenu attribute. I'm sorry but I can't recall where I got my custom extension of knp_menu.html.twig, I use it since a while and I forgot the source. If needed, I can post it here.

phiamo / MopaBootstrapBundle