A guide to dynamically applying Bootstrap classes to <li> elements based on the current page

Question

A guide to dynamically applying Bootstrap classes to <li> elements based on the current page

Although the title may appear odd, I will provide a brief explanation. In my admin section, I have extended a layout with a Sidebar that is displayed as a bootstrap list on every page.

Depending on the current page, I want to apply an active class to a specific li element. However, I am unsure of the standard method to accomplish this in a Laravel project.

I initially considered adding a JavaScript script to each page, but I realize that would not be the most efficient approach...

So, I am seeking advice from you all. Thank you!

css html laravel bootstrap-4

Answer 1

Answer №1

While I may not have extensive knowledge in PHP/Laravel, my suggestion would be to retrieve your route and compare it against that

<li{{ $pageRoute == 'yourPage' ? ' class="active"' : '' }}>

Answer 2

While I may not have extensive knowledge in PHP/Laravel, my suggestion would be to retrieve your route and compare it against that

<li{{ $pageRoute == 'yourPage' ? ' class="active"' : '' }}>

Answer 3

Answer №2

Start by creating a helpers file within the App directory, where you can define a function to apply a specific class to an element of your choice.

Follow these steps:

Create a new file inside the App folder. For example: helpers.php

In the newly created helpers.php file, add the following code snippet:

function customizeClass($path, $className = 'active'){
    return call_user_func_array('Request::is', (array)$path) ? $className : '';
}

Include the file in the composer.json. This allows the helpers.php file to be autoloaded whenever the project is executed. Add the following lines inside composer.json
```
"autoload": {
    ...
    "files": [
        "app/helpers.php" //note: filename sensitivity may vary depending on the server
    ]
},
```
Proceed to the terminal and execute composer dump-autoload
You are now set to utilize the customizeClass() function. For instance:
```
<li class="nav-item {{ customizeClass('products') }}">
```

Additional Tips:

The customizeClass() function supports wildcard usage like customizeClass('product*'), where * represents the wildcard character.

You can also pass an array of routes to the customizeClass() function. For instance:

<li class="nav-item {{ customizeClass(['*product*','brand*','color*','size*','*category*']) }}">

Answer 4

Start by creating a helpers file within the App directory, where you can define a function to apply a specific class to an element of your choice.

Follow these steps:

Create a new file inside the App folder. For example: helpers.php

In the newly created helpers.php file, add the following code snippet:

function customizeClass($path, $className = 'active'){
    return call_user_func_array('Request::is', (array)$path) ? $className : '';
}

Include the file in the composer.json. This allows the helpers.php file to be autoloaded whenever the project is executed. Add the following lines inside composer.json
```
"autoload": {
    ...
    "files": [
        "app/helpers.php" //note: filename sensitivity may vary depending on the server
    ]
},
```
Proceed to the terminal and execute composer dump-autoload
You are now set to utilize the customizeClass() function. For instance:
```
<li class="nav-item {{ customizeClass('products') }}">
```

Additional Tips:

The customizeClass() function supports wildcard usage like customizeClass('product*'), where * represents the wildcard character.

You can also pass an array of routes to the customizeClass() function. For instance:

<li class="nav-item {{ customizeClass(['*product*','brand*','color*','size*','*category*']) }}">

A guide to dynamically applying Bootstrap classes to <li> elements based on the current page

Answer №1

Answer №2

Similar questions

Why is my data not being saved to the database when using eloquent?

Ways to broaden the map of a variable in SCSS

Animate the downward movement of the parent of a specific element, while simultaneously animating the upward motion of all others that are

Enhancing an image's background with the :before CSS3 pseudo-selector to create a dark

Styling float-right elements in Bootstrap with Material UI Box Borders

Steps to create a zigzagging line connecting two elements

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Accessing an image with a URL in AngularJS

Set the value of a static file uploader using jQuery

Oops! Looks like the module "@google-cloud/vision" hasn't been loaded in this context yet. Make sure to use require([]) to load it before proceeding

Use JavaScript to identify the front layer

Is there a way to arrange my bootstrap navigation tabs vertically on my mobile device?

Utilizing JavaScript to retrieve input names from arrays

The problem arises when trying to use the Jquery click event on buttons that have been generated

trouble centering elements in bootstrap

I am having trouble getting the (:active) pseudo-class to function properly with the menu on my WordPress theme

Disable responsiveness for low-resolution devices

What is the process of utilizing a <li> for a hover selector in jquery?

leveraging frameworks such as bootstrap and semantic ui

Error: The NgTable in AngularJS is not defined when reloading the page