Laravel: Detecting if you’re inside a set named route

Everyone wants their header button to be visible “active” when the user is inside a Route.

Italo Baeza
Jul 1 · 3 min read

In almost all web pages, it’s a requisite to have the user see where he is when navigating the site. One of the most used ways to do it, visually, is to highlight tab link. I mean, is just basic UX stuff:

Some basic and standard Bootstrap 4 navigation tabs.

The problem is not to put a class like “active” inside the link, but rather how to detect if the Route is what the link corresponds to.

Don’t worry, Laravel got us covered with a little magic.

Detecting the route or URL pattern

One of the great helpers in the framework is called is(). This method is available to the Request and Route helpers, and allows to compare a string to the Request URL, or Route name, respectively.

Let’s start with the documented method. Our User may get into a Podcast index, which shows the latest published Podcast. If he is, we will slap the “active” class in our link, which highlights the button link.

Our button code is the following:

<a href="/podcast" class="header-button">
All Podcasts
</a>

Now that we have our button, we need to inject the class if the route is podcasts or anything below that URL using the * wildcard. We can just use the request()->is() method and check if the route is what we expect.

<a href="/podcasts" 
class="{{ request()->is('podcasts/*') ? 'active' : null }}">
All Podcasts
</a>

But there is another option: checking the route name. If we have named our routes accordingly, we can also use the Route helper to check if the route name is podcast, or anything below. The syntax is the same, as we can see in the source code.

<a href="{{ route('podcasts') }}" 
class="{{ route()->is('podcasts-*') ? 'active' : null }}">
All Podcasts
</a>

That’s all. No need to download packages or create walls of code. Of course, this is a trade-off if you consider multiple links, but in that case I would suggest a Class to automatically generate the whole list, like reading an array stored somewhere with some values, instead of just simply create every link by hand in your view.

Talking about making our life easier, you can create your own Blade directive to handle this code automatically:

Blade::directive('linkactive', function ($route) {
return "<?php echo route()->is($route) ? 'active' : null; ?>";
});

And while you’re it, check what route or URL is active once instead of comparing each list element, because that would be computationally costly — just imagine comparing if the route is podcasts/* 100 times in each request, madness!

By the way, if you came here looking for breadcrumbs, that’s on another level. Check this Laravel News post about a good package that can solve your problem.

Italo Baeza

Written by

Graphic Designer. Web Developer Full Stack. Retired Tech & Gaming Editor.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade