Wrap around <ul> only

[bbashy]

Got pretty much everything working. Thanks for the package!

One small issue with dropdown using UIKit. When I use ->submenuIf() and have ->wrap('div', ['class' => 'uk-navbar-dropdown']), it adds it around the <a> as well which I don't want. Any way to do that? Tried quite a few different ideas but none worked.

Menu::macro('main', function() {
    $menu = Menu::new()
        ->addClass('uk-navbar-nav')
        ->setActiveClass('uk-active')
        ->route('home', 'Home')
        ->submenuIf($isAdmin, '<a href="#">Admin</a>', function (Spatie\Menu\Laravel\Menu $menu) {
            $menu
                //->wrap('div', ['class' => 'uk-navbar-dropdown'])
                ->addClass('uk-nav uk-navbar-dropdown-nav')
                ->route('admin.item', 'Item')
                ->route('admin.item2', 'Item 2')
            ;
        })
        ->setActiveFromRequest()
    ;

    return $menu;
});

Need this format;

<li>
    <a href="#">Parent</a>
    <div class="uk-navbar-dropdown">
        <ul class="uk-nav uk-navbar-dropdown-nav">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</li>

[sebastiandedeyne]

Could you post the html that the package is currently outputting too so I can do a quick comparison?

Been a while 😄

[bbashy]

It was basically this, notice the <div> and the <a> around the <ul>

<li>
    <div class="uk-navbar-dropdown">
        <a href="#">Parent</a>
        <ul class="uk-nav uk-navbar-dropdown-nav">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</li>

[bbashy]

So I've opted for a quick fix by just adding the class from the div onto the ul. I'm not sure what this will break but would be good to know how to wrap elements around certain menus (ul).

[sebastiandedeyne]

I'll try to add something for this at some point, got a few issues like this open at the moment wanting more options for the html generation. Gonna try to tackle them all at once :)

[faustbrian]

@sebastiandedeyne Is there any ETA for when this might be possible? I am using https://getuikit.com/docs/navbar which has quite different HTML structure for submenus than other frameworks like bootstrap so currently I am forced to use Blade and some directives instead of this package.

[bbashy]

@faustbrian Let me tell you, you can make the navbar from UiKit in this package. I've done it with quite an advanced structure.

It works with putting the class on the surrounding div for this issue but still waiting for it to allow around ul only.

[faustbrian]

@bbashy Would you have an example for submenus? Tried a few things and it always places the title in the wrong spot.

Needed

<li>
    <a href="#">Parent</a>
    <div class="uk-navbar-dropdown">
        <ul class="uk-nav uk-navbar-dropdown-nav">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</li>

Result from Menu

<li>
    <div class="uk-navbar-dropdown">
        <a href="#">Parent</a>
        <ul class="uk-nav uk-navbar-dropdown-nav">
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</li>

Menu::new()
    ->submenu(Link::to('#', 'Parent'), function (Menu $menu) {
        $menu
            ->link('#', 'Item')
            ->link('#', 'Item')
            ->link('#', 'Item')
            ->wrap('div.uk-navbar-dropdown')
            ->addClass('uk-nav uk-navbar-dropdown-nav');
    });

I am using a fix like that ->addClass('uk-nav uk-navbar-dropdown uk-navbar-dropdown-nav'); but I already found a few thinks that randomly look weird or get animated weirdly in the navbar.

[bbashy]

Just been using this. Seems to work fine.

->submenu('<a href="#">Sub Menu <span uk-icon="icon: triangle-down"></span></a>', function (Spatie\Menu\Laravel\Menu $menu) {
            $menu
                ->addClass('uk-nav uk-navbar-dropdown-nav uk-navbar-dropdown')
                ->route('sub-1', 'Sub 1', 'sub-1')
                ->route('sub-2', 'Sub 2', 'sub-2')
            ;
        })

[sebastiandedeyne]

Is this still an issue? You'll have more rendering options when spatie/menu#64 is merged. Gonna close this for now, feel free to reopen or create a fresh issue if there are still any requests.