Voyager: how to create drop down menu in laravel voyager latest version

[aamirkhan37557]

• Laravel Version: #.#.#
• Voyager Version: #.#.#
• PHP Version:
• Database Driver & Version:

Description:

how can i create drop down menu in laravel voyager latest version there is no option to select the child menu according to the parent menu ..in short how can i create drop down menu in laravel voyager how can i select the parent id of menu item in laravel voyager please some body help me i data base the parent id is showing null how can i give the parent id?

Steps To Reproduce:

[endrureza]

@aamirkhan37557 Voyager menu is designed to use dd javascript plugin, so you just need to create two menus, on the page menu builder you just need to drag and drop or slide to become child menu.

[aamirkhan37557]

but on the backend there is no option for chid menu

[aamirkhan37557]

how can i display drop down menu on the front end

[endrureza]

@aamirkhan37557 yeah, of course there is no child menu. They are all just menus, if you want to make menu to become a child, just like i said, go into menu builder and sliding a menu and it will become child menu.

i'm not quite following you about displaying drop down menu on the front end ? front end where you mean?

[nunomsh]

@aamirkhan37557 on the menu builder, slide to right the item you want to be a sub menu.
I've notice that this menus only goes to 2 level. 2 or more wont open the menu
Ex::
-Item Main
---Sub item Main
------3 level of menu (wont work)

[aamirkhan37557]

endrureza how would i display that sub menu on my website ....i mean to the user or clients ... i know on sliding it become sub menu but that is shwn only to the admin panel i want to show it on my school website from the admin panel below is example

[endrureza]

@aamirkhan37557 you just need to write menu("menu_name") on your view. it's already done the trick, but for your information, it doesn't return collection , it return HTML rendering. I guess, you need to change it from menu model inside voyager package. I've come across this problem though @fletch3555

[aamirkhan37557]

sir i have displayed it but drop down is not working

in admin apnel

below i have attached db image of menu item how can i know from db that which one is sub menu

[endrureza]

@aamirkhan37557 it needs to be tweaked of course. It doesn't just show the sub menu the way you want adaptable to your current template. Why don't you dd(menu('menu_name')) so you could figure it out how to display correctly inside your template.

[aamirkhan37557]

can you give me some demo code for display drop down menu ?

[endrureza]

@aamirkhan37557 you might want to take a look at voyager view menu > default.blade.php , perhaps you can manipulate the code as you wish there. Cause it's the code for menu('menu_name')

[aamirkhan37557]

yeah i have did this but is displaying only main maenu now the drop down

[aamirkhan37557]

how will i know that which one is drop down menu in menu_item table

[aamirkhan37557]

in menu items tabels what is parent_id for?
how can i cutomize the view of for menu_item

[endrureza]

@aamirkhan37557 well, now you take a look at voyager Menu.php there is a public function called display. i will add like this

if (is_null($type)) {
       $type = 'voyager::menu.default';
} elseif ($type == 'bootstrap' && !view()->exists($type)) {
       $type = 'voyager::menu.bootstrap';
} elseif($type == 'raw') {
       return $menu->parent_items; 
}

and then you change call menu into this menu('menu_item','raw')

then you just need to foreach the menu, if a menu has sub, it will has a relation called children, so in your foreach you may call it like this $menu->children , that's it

[ivaskonyan]

@aamirkhan37557 I think this is the easiest way. Just write down in your view:

_navbar.blade.php_

<ul class="vertical menu medium-horizontal align-center dropdown" data-dropdown-menu>
            {{(menu('main','foundation.navbarItem'))}}
</ul>

_navbarItem.blade.php_

@foreach($items as $menu_item)
    <li>
        <a class="text-center" href="{{ $menu_item->url }}">{{ $menu_item->title }}
        </a>
        @php
            $submenu = $menu_item->children;
        @endphp

        @if(isset($submenu))
            <ul class="menu">
                @foreach($submenu as $item)
                    <li><a href="{{$item->url}}">{{$item->title}} </a></li>
                @endforeach
            </ul>
        @endif
    </li>
@endforeach

[thoaitrieu]

What about this, https://devdojo.com/series/laravel-voyager-010/episode/voyager-menu-builder

[fletch3555]

Voyager is not responsible for how you render the menu in your front-end. If you have further issues with the Voyager interface, please open a new issue.

[sineld]

This is how I created:

@foreach($items as $item)
    <li class="dropdown"><a target="{{ $item->target }}" href="{{ url($item->url) }}" data-toggle="dropdown" class="dropdown-toggle">{{ $item->title }}</a>
        @if($item->children->count())
            <ul role="menu" class="dropdown-menu">
                @foreach($item->children as $subItem)
                    <li>
                        <a target="{{ $subItem->target }}" href="{{ url($subItem->url) }}">{{ $subItem->title }}</a></li>
                    @if(!$loop->last) <li class="divider"></li> @endif
                @endforeach
            </ul>
        @endif
    </li>
@endforeach

[Evengelius]

@ivaskonyan this is the easiest solution so far.

Works great with any template : dropdown or accordion
Just simply adapt your code to his solution.

Thank you very much.

[KasraK2K]

i used #foundation 5 and make my own menu with this code:

<div class="contain-to-grid sticky">
    <nav class="top-bar" id="main-menu" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <h2 class="show-for-medium-up">
                    <a href="#">my site title show in large device</a>
                </h2>
            </li>
            <li class="toggle-topbar menu-icon">
                <a href="#">
                    <span>menu</span>
                </a>
            </li>
        </ul>
        <section class="top-bar-section text-right">
            <ul class="right">
                @foreach($items as $menu_item)
                    @php
                        $submenu = $menu_item->children;
                    @endphp
                    @if(count($submenu) >= 1)
                        <li class="has-dropdown">
                            <a href="{{ $menu_item->url }}">{{ $menu_item->title }}</a>
                            <ul class="dropdown">
                                @foreach($submenu as $item)
                                    <li><a href="{{$item->url}}">{{$item->title}} </a></li>
                                @endforeach
                            </ul>
                    @else
                        <li>
                            <a href="{{ $menu_item->url }}">{{ $menu_item->title }}</a>
                        </li>
                    @endif
                @endforeach
            </ul>
        </section>
    </nav>
</div>

you can add this code to some blade file like "foundation-menu" and call that with this method:

{!! menu('main menu', 'layouts.foundation-menu') !!}