Tutorial/Dropdown for Symfony 4.2, bootstrap(s), etc, navbar, dropdown, etc.

[tacman]

I'm having a really hard time creating a simple bootstrap navbar with a dropdown.

There are LOTS of webpages that describe how to do it, but I haven't had any luck with any solution, except to use MopaBootstrapBundle, which seems like overkill for just a navbar.

In the same way that Symfony forms has a few built-in options (bootstrap_3_horizontal, etc.), I basically want to simply set the twig theme and then configure the top navbar, side navbar, etc.

Part of the confusion is how many options there are. Many of them examples on the web add the class and attributes in the menu creation, but that seems like a very bad practice, to lock in that a menu item is of the navbar-item class. That'd make more sense when rendering the menu (from the twig template).

Regardless, despite hours of hacking I'm unable to get a simple bootstrap navbar or sidebar menu working. Can anyone point me to a working example of a navbar with dropdown that includes a MenuBuilder class, the html/twig that renders it?

[truckee]

Having struggled with this issue for a couple of days now I've come to the conclusion that "you can't get there from here."

What convinced me of this was attempting to reproduce this:

<nav class="navbar navbar-expand-lg navbar-light bg-light mb-3 border">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">New contacts</a>
                <div class="dropdown-menu" aria-labelledby="dropdown09">
                    <a class="dropdown-item" href="{{ path('contacts_add', {'source':'Most recent'}) }}">Most recent</a>
                    <a class="dropdown-item" href="{{ path('contacts_add', {'source':'FY to date'}) }}">FY to date</a>
                </div>
            </li>
...

with this:

$menu->addChild('New contacts')
        ->setAttributes([
            'class' => 'nav-item dropdown',
        ])
        ->setLinkAttributes([
            'class' => 'nav-link dropdown-toggle',
            'data-toggle' => 'dropdown',
            'href' => '#',
            'role' => 'button',
            'aria-haspopup' => 'true',
            'aria-expanded' => 'false',
        ])
;
....

The problem was that none of the link attributes are assigned to the dropdown toggle New contacts.

So more basic html coding ahead.

[traoreyaya94]

Bonjour je sais pas si vous avez trouver une solution a votre problème mais moi aussi je suis dans le même problème si vous pouvez me faire part de votre solution.
Merci d'avance

[alexisacseo]

Problème identique. Pas de pistes de solutions ?

[tacman]

In my base menu class, I've added a utility (um, hack?), and now all my nav menu methods return the cleaned menu.

        return $this->cleanupMenu($menu);
        // return was $menu;

    public function cleanupMenu(ItemInterface $menu): ItemInterface
    {

        $menu->setChildrenAttribute('class', 'navbar-nav');
// menu items
        foreach ($menu as $child) {
            $child->setLinkAttribute('class', 'nav-link')
                ->setAttribute('class', 'nav-item');
        }
        return $menu;
    }