Laravel active menu item for url included parameters

user_8002747 0
Viewed 75972

I'm trying to set active class in my list item, but it doesn't work.

My code in blade:

@foreach($data as $site)
  <ul class="sidebar-menu" id="second-menu">
  @if(isAdmin())<li class="{{-- active class  for url parameter --}}"><a href="{{ url('sites/'.$site->id.'/edit') }}" >{{ $site->name }}</a></li>
@endif
</ul>
@endforeach

So, if I write: li class="@if(getRouteName() == 'site@index'){{ 'active' }}@endif" , it works nice, but in my case the problem is that I want to get 'active' class in foreach sites/'.$site->id.'/edit

Many thanks.

laravel php
16 Answers

I am currently using Laravel 5.6.* and my solution is:

<a href="#" class="nav-link {{ request()->is('users*') ? 'active' : '' }}">Users</a>
user_73105930

There is also the following if you have named your route : 

<li class="{{ Request::routeIs('admin') ? 'active' : '' }}">...</li>

Inspired from here

user_84522830

You can try this as well

<a href="#" class="{{ (\Request::route()->getName() == 'put the address of your route here or your route name') ? 'active' : '' }}">

e.g:

<a href="#" class="{{ (\Request::route()->getName() == 'admin') ? 'active' : '' }}">

Note: I only test in Laravel 5.5

user_69259750

Make a function in helper.

function activeMenu($uri = '') {
    $active = '';
    if (Request::is(Request::segment(1) . '/' . $uri . '/*') || Request::is(Request::segment(1) . '/' . $uri) || Request::is($uri)) {
        $active = 'active';
    }
    return $active;
}

Use it in sidebar.

<li class="{{ activeMenu('dashboard') }}"></li>
<li class="{{ activeMenu('student') }}"></li>
<li class="{{ activeMenu('teacher') }}"></li>
user_99780780

I am using Laravel 7 and Bootstrap Dropdown. So there are several collapse items that depend on the link, this works:

<li class="nav-item {{ Route::is('users.*') || Route::is('user.*')  ? 'active' : '' }}">
user_90315160

First i am gonna shear my opinion then you can vote or nonvoter.

  1. First you want to active your menu using path so you can use bellow code.

    {{ request()->path() === 'admin/orders' ? 'your_active_class' : '' }}

  2. Second if you want active your menu using query parameter so you can use bellow code.

    {{ request()->query('status') === 'processing' ? 'your_active_class' : '' }}

  3. Third using name route

request()->routeIs('admin.cities')

Or even sub-routes (like editing, creating, or whatever with

request()->routeIs('admin.cities*')

If you prefer to use the route facade, you still can do that with

 Route::named('admin.cities*')
user_115388480 
//my admin.app.blade file
<ul class="nav">
      <li class="nav-item @yield('query')">
        <a class="nav-link" href="{{route('query_page')}}">
          <i class="material-icons">query_builder</i>
          <p>Queries</p>
        </a>
      </li>
      <li class="nav-item @yield('feedback')">
        <a class="nav-link" href="{{route('feedback_page')}}">
          <i class="material-icons">feedback</i>
          <p>Feedback</p>
        </a>
      </li>
  </ul>

     //query.blade
     @extends('admin.app')
     @section('title', 'Query Manager')
     @section('page-heading', 'Query Manager')
     @section('query','active')



     //feedback.blade
     @extends('admin.app')
     @section('title', 'Feedback Manager')
     @section('page-heading', 'Feedback Manager')
     @section('feedback','active')
user_88201660

Laravel 7+

For named routes with prefixes like admin or admin.view or admin.edit etc...

<li class="{{ Str::startsWith(Route::currentRouteName(), 'admin')) ? 'active' : '' }}">...</li>

A bit verbose but you can look into making a custom function like is_active('admin')

user_119482210

I like more to use this syntax to check the route since has not been mentioned.

<li>
    <a href="#" class="nav-link {{ request()->routeIs('team*') ? 'active font-weight-bolder' : '' }}">Teams</a>
</li>

Two more things:

  • Adding an asterisk, without a dot as route name will target all the routes that start with team, teams, etc.

  • If you are using any CSS framework like Bootstrap or Tailwind you can add here also the classes to style the menu item, instead of writing some CSS for it.

user_100753940

For convenience, make a function in helper and autoload it.

"autoload": {
    "psr-4": {
        "App\\": "app/",
        "Database\\Factories\\": "database/factories/",
        "Database\\Seeders\\": "database/seeders/"
    },
    "files": [
        "helpers/helpers.php"
    ]
},


// helpers/helpers.php

if (!function_exists('selected')) {
    function selected($routeName, $parameters = [], $class = 'active')
    {
        if (!route_has($routeName)) {
            return '';
        }

        return '/' . request()->path() == route($routeName, $parameters, false) ? $class : '';
    }
}


<a href="{{ route('example_route_name', [], false) }}" class="{{ selected('example_route_name', []) }}">Menu
</a>
user_78049680

In case you would like to use inline CSS, then use the solution below(Currently using Laravel 8).

     <ul>
         <li><a href="{{ url('/') }}" style="{{ request()->is('/') ? 'color: #F9A82D;' : '' }}">Home</a></li>
         <li><a href="{{ url('/profile') }} " style="{{ request()->is('/profile') ? 'color: #F9A82D;' : '' }}">Profile</a></li>
    </ul>

For links with parameters for example http://127.0.0.1:8000/user/{id} use "request()->is('/user/*')". see example below:
<li><a href="{{ url('/user{id}') }} " style="{{ request()->is('/user/*') ? 'color: #F9A82D;' : '' }}">User</a></li>

reference
your welcome.

user_79083300

Using request segments to make current menu active. reference

<li class="{{ (request()->segment(2) == 'home') ? 'active' : '' }}" >
    <a href="{{ url('home') }}">Home</a>
</li>
user_94590340

Laravel 8

//http://my_salat.test/dashboard/owner/services/create

blade | class active : edit & create & index => pages

{{ request()->segment(3) == 'services' ? 'active' : '' }}

segment(3) number word URL route => services

user_175819790
is('admin/restaurant/create*')) ? 'active' : '' }}>

.active { background-color: #7dd3f6; }

user_118474820
Related