Laravel Question posted in
The official Laravel Documentation can be found here.

Bootstrap 5 navigation in Laravel

I have a parent element of Booking
its children have a route of booking/…

If I have booking itself selected it makes all booking/… links active.
How can I change this?

Image of link structure

I’ve tried to use if statements but it wouldn’t want to work.

Tags:

2

Answers


  1. 0 
    <li class="nav-item">
      <a class="nav-link {{ request()->is('booking') ? 'active' : '' }}" href="/booking">Langverblijf</a>
</li>
<li class="nav-item">
       <a class="nav-link {{ request()->is('booking/day') ? 'active' : '' }}" href="/booking/day">Kortverblijf</a>
</li>
<li class="nav-item">
     <a class="nav-link {{ request()->is('booking/calendar') ? 'active' : '' }}" href="/booking/calendar">Kalender</a>
</li>
<li class="nav-item">
    <a class="nav-link {{ request()->is('booking/planboard') ? 'active' : '' }}" href="/booking/planboard">Planboard</a>
</li>

    try like this maybe this can help..

    Login or Signup to reply.
  2. 0

    To handle the navigation in Laravel with Bootstrap 5, where you have a parent element (Booking) with children routes (booking/...), and you want to ensure that only the relevant child link is active, you can use Laravel’s route-related helpers to check the current route or URL segment.

    Ensure that your route names are correctly defined and that the Route::is() and Request::is() helpers are applied appropriately in your navigation. This approach should solve the issue where all child routes are being marked active when only the parent route is selected.

    I hope It can help you

    Assuming your navigation looks something like this:

    <ul class="nav">
    <li class="nav-item">
        <a href="{{ route('booking.index') }}" class="nav-link {{ Route::is('booking.index') ? 'active' : '' }}">
            Booking
        </a>
    </li>
    <li class="nav-item">
        <a href="{{ route('booking.create') }}" class="nav-link {{ Route::is('booking.create') ? 'active' : '' }}">
            Create Booking
        </a>
    </li>
    <li class="nav-item">
        <a href="{{ route('booking.show', ['id' => 1]) }}" class="nav-link {{ Route::is('booking.show') ? 'active' : '' }}">
            View Booking
        </a>
    </li>
</ul>

    If you want a parent item to be active when any of its child routes are active, you can use Request::is() to check if the current URL matches any of the child routes:

    <li class="nav-item dropdown">
    <a href="#" class="nav-link dropdown-toggle {{ Request::is('booking*') ? 'active' : '' }}" data-bs-toggle="dropdown">
        Booking
    </a>
    <ul class="dropdown-menu">
        <li><a href="{{ route('booking.index') }}" class="dropdown-item {{ Route::is('booking.index') ? 'active' : '' }}">View Bookings</a></li>
        <li><a href="{{ route('booking.create') }}" class="dropdown-item {{ Route::is('booking.create') ? 'active' : '' }}">Create Booking</a></li>
    </ul>
</li>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search