laravel add a drop down in menu bar with links to other pages

Question

I am new to laravel and the blade templet setup. I am working on setting up an art website to show paintings and so on. Right now I got a basic index.blade.php, however, I want to change one the links into a dropdown to show other options. I seem not to be able to grasp how to get it to work.

This is how my basic setup looks like.

<div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" style="color: black">
                <li><a
                            @if( $page == 'about')
                            class="activePage"
                            @else
                            class="nonActivePage"
                            @endif
                            href="./about">About the Artist</a></li>
                <li><a
                            @if( $page == 'products')
                            class="activePage"
                            @else
                            class="nonActivePage"
                            @endif
                            href="./product">Products</a></li>
                <li><a
                            @if( $page == 'order')
                            class="activePage"
                            @else
                            class="nonActivePage"
                            @endif
                            href="./order">Order</a></li>
                <li><a
                            @if( $page == 'contact')
                            class="activePage"
                            @else
                            class="nonActivePage"
                            @endif
                            href="#" onclick="contact();">Contact</a></li>

            </ul>
        </div>

However, under Products, I want to add Watercolor, Oil and Acrylic paintings.

This is what I thought may work but I seem not to grasp the whole blade structure at this point.

<div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" style="color: black">
                <li><a
                            @if( $page == 'about')
                            class="activePage"
                            @else
                            class="nonActivePage"
                            @endif
                            href="./about">About the Artist</a></li>
                 <li class="dropdown">
                    @if( $page == 'product')
                        <a class="dropdown-toggle activePage" data-toggle="dropdown" href="#">
                            Product</a>
                        <ul>
                            <li><a href="./about">Watercolor paintings</a></li>
                            <li><a href="#">This</a>Oil Paintings</li>
                            <li><a href="#">That</a>Acrylic Paintings</li>
                        </ul>
                    @else
                        <a class="nonActivePage" href="#">
                            Product</a>
                    @endif
                </li>
                <li><a
                            @if( $page == 'order')
                            class="activePage"
                            @else
                            class="nonActivePage"
                            @endif
                            href="./order">Order</a></li>
                <li><a
                            @if( $page == 'contact')
                            class="activePage"
                            @else
                            class="nonActivePage"
                            @endif
                            href="#" onclick="contact();">Contact</a></li>

            </ul>
        </div>

It just is not showing the ul dropdowns at all. Any pointers are greatly appreciated.

Answer 1

first of all, try to give a name to every single route in your router (web.php):

Route::any('/about', 'someConntroller@someaction')->name('about');

then use route method in your views. here is a simple example:

<li>
    <a {{ $page == 'about' ? 'class="activePage"' : 'class="nonActivePage"' }}
        href="{{ route('about') }}">
            About the Artist
    </a>
</li>