Laravel - Automatically assign a class to a nav-link when its generated URL corresponds to the current route

Question

Laravel - Automatically assign a class to a nav-link when its generated URL corresponds to the current route

I'm currently working with Bootstrap 4 and I am attempting to dynamically add the class active to my nav-item elements when their href attribute matches the current URL.

In my HTML code, I have implemented a simple URL generator as follows:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="{{ url('/brands') }}" role="button">Brands</a>
    </li>

    <!-- ... -->
</ul>

To compare the links with the current URL, I used a jQuery method:

$('.navbar-nav .nav-item .nav-link').each( () => {
    // If the current path matches the link URL...
    if ($(this).attr('href').indexOf(location.pathname) !== 1) {
        // ...then add the 'active' class to the parent 'nav-item'
        $(this).parent().addClass('active')
    }
})

However, I encountered an issue where $(this).attr('href') was returning undefined, likely due to it being a generated URL, resulting in the nav-item not receiving the active class.

EDIT: Currently, the URL is very basic without any parameters, such as:

If anyone has a solution to this problem, your input would be greatly appreciated. Thank you in advance.

html css laravel-5 bootstrap-4

Answer 1

Answer №1

If you're looking for an alternative approach, I suggest exploring a different method. Rather than using jQuery to "activate" the link, consider implementing it server-side with Laravel:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="{{ Request::is('brands*') ? 'nav-link active' : 'nav-link' }}"
           href="{{ url('/brands') }}" 
           role="button">Brands</a>
    </li>

    <!-- ... -->
</ul>

Explanation:

Laravel utilizes the template-engine Twig to render HTML on the server-side. Instead of manipulating the DOM on the client-side, you can incorporate a conditional statement to check for current request parameters. Laravel provides a native feature to easily assess the request path, including the use of wildcards.

Answer 2

If you're looking for an alternative approach, I suggest exploring a different method. Rather than using jQuery to "activate" the link, consider implementing it server-side with Laravel:

<ul class="navbar-nav">
    <li class="nav-item">
        <a class="{{ Request::is('brands*') ? 'nav-link active' : 'nav-link' }}"
           href="{{ url('/brands') }}" 
           role="button">Brands</a>
    </li>

    <!-- ... -->
</ul>

Explanation:

Laravel utilizes the template-engine Twig to render HTML on the server-side. Instead of manipulating the DOM on the client-side, you can incorporate a conditional statement to check for current request parameters. Laravel provides a native feature to easily assess the request path, including the use of wildcards.

Answer 3

Answer №2

The issue you are experiencing may be attributed to the distinction between using () => {} and function () {}. When utilizing the arrow syntax, the property this becomes unbound, causing $(this) to yield an empty jQuery object instead of the desired anchor element. Subsequent jQuery operations will likely result in empty or undefined values.

To resolve this problem, consider replacing .each( () => { with .each(function() {.

To learn more about the arrow syntax, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 4

The issue you are experiencing may be attributed to the distinction between using () => {} and function () {}. When utilizing the arrow syntax, the property this becomes unbound, causing $(this) to yield an empty jQuery object instead of the desired anchor element. Subsequent jQuery operations will likely result in empty or undefined values.

To resolve this problem, consider replacing .each( () => { with .each(function() {.

To learn more about the arrow syntax, visit: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Answer 5

Answer №3

My approach to managing active links in Laravel projects involves creating a dynamic helper function for the sidebar or any link activation process:

<li class="nav-item {{ in_array(Route::currentRouteName(),[
            'admin.dashboard',
            'admin.updates',
        ])? 'active show' : ''}}">
          <a href="" class="nav-link with-sub"><i class="typcn typcn-clipboard"></i>Dashboard</a>
          <nav class="nav-sub">
            <a href="{{ route('admin.dashboard') }}" class="nav-sub-link {{  BladeHelper::sideBar_link_isActive('admin.dashboard') }}">Home</a>
          </nav>
</li>

The key part of this implementation is

{{  BladeHelper::sideBar_link_isActive('admin.dashboard') }}

A custom helper function is created to determine and apply the "active" class based on the current URL.

This functionality can be found in the path: app\Helpers\BladePageHelper

<?php

namespace App\Helpers;

use Route;
class BladePageHelper
{
    public static function sideBar_link_isActive($selectedLink){
        $currentRouteName = Route::currentRouteName();
        if($selectedLink === $currentRouteName){
            return 'active';
        }else{
            return '';
        }
    }
}

The use of route names, such as

Route::("/","MyController@mymethod")->name("myname")

, is preferred in this context, but URLs can also be utilized.

This method provides an efficient way to handle link activations in Laravel projects.

Enjoy coding!

Answer 6

My approach to managing active links in Laravel projects involves creating a dynamic helper function for the sidebar or any link activation process:

<li class="nav-item {{ in_array(Route::currentRouteName(),[
            'admin.dashboard',
            'admin.updates',
        ])? 'active show' : ''}}">
          <a href="" class="nav-link with-sub"><i class="typcn typcn-clipboard"></i>Dashboard</a>
          <nav class="nav-sub">
            <a href="{{ route('admin.dashboard') }}" class="nav-sub-link {{  BladeHelper::sideBar_link_isActive('admin.dashboard') }}">Home</a>
          </nav>
</li>

The key part of this implementation is

{{  BladeHelper::sideBar_link_isActive('admin.dashboard') }}

A custom helper function is created to determine and apply the "active" class based on the current URL.

This functionality can be found in the path: app\Helpers\BladePageHelper

<?php

namespace App\Helpers;

use Route;
class BladePageHelper
{
    public static function sideBar_link_isActive($selectedLink){
        $currentRouteName = Route::currentRouteName();
        if($selectedLink === $currentRouteName){
            return 'active';
        }else{
            return '';
        }
    }
}

The use of route names, such as

Route::("/","MyController@mymethod")->name("myname")

, is preferred in this context, but URLs can also be utilized.

This method provides an efficient way to handle link activations in Laravel projects.

Enjoy coding!

Laravel - Automatically assign a class to a nav-link when its generated URL corresponds to the current route

Answer №1

Answer №2

Answer №3

Similar questions

Column-count can result in the flex div dividing the element into two parts

Analyzing data visualization within CSS styling

What causes line-height to be overlooked in a span element but effective in a div element?

Should scripts be replayed and styles be refreshed after every route change in single page applications (SPA's)? (Vue / React / Angular)

How can I transfer CSS styles from one class to another using JQuery?

One common issue is being unable to target input[type=file] when multiple forms are present on a page using JavaScript

The scroll header remains fixed in size despite being responsive

How can I extract values from HTML attributes in C# using string manipulation techniques?

What is the best way to add animation to switch between table rows?

add items to the dropdown using a loop

Sliding background in a multi-column accordion

Is it possible for a Bootstrap table to extend beyond the boundaries of a Bootstrap

Embedding a YouTube video in a view player using HTML5

The navigation links will remain visible even when the unordered list is set to 0% opacity

Angular: Utilizing Nested ng-repeat Alongside groupBy Feature on Initial Page Load or Refresh

Error: The Vue bind object property cannot be read because it is undefined in the class binding

Angular - Render distinct options in dropdown depending on criteria

Extract the text without the HTML tags

Issue with PrimeNG DataTable contextMenu alignment inside TabView

Repair the image within the HTML image tag