Ekko is a Laravel helper package. It helps you mark currently active menu item in your navbar.
To mark a menu item active in Bootstrap, you need to add a active
CSS class to the <li>
tag:
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
You could do it manually with Laravel, but you will end up with a sausage:
<ul class="nav navbar-nav">
<li class="@if(URL::current() == URL::to('/')) active @endif"><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
With Ekko your code will look like this:
<ul class="nav navbar-nav">
<li class="{{ isActiveURL('/') }}"><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
What if you are not using Bootstrap, but some other framework or a custom design? Instead of returning active
CSS class, you can make Ekko return anything you want including boolean true
or false
:
<ul class="nav navbar-nav">
<li class="{{ isActiveURL('/', 'highlight') }}"><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
Using boolean true
or false
is convenient if you need to display some content depending on which page you are in your layout view:
@if(isActiveRoute('home', true))
<p>Something that is only visible on the `home` route.</p>
@endif
From the command line:
composer require laravelista/ekko
Include the service provider in config/app.php
:
'providers' => [
...,
Laravelista\Ekko\EkkoServiceProvider::class
];
And add a facade alias to the same file at the bottom:
'aliases' => [
...,
'Ekko' => Laravelista\Ekko\Facades\Ekko::class
];
There are two ways of using Ekko in your application, by using a facade Ekko::isActiveURL('/about')
or by using a helper function isActiveURL('/about')
.
Compares given route name with current route name.
isActiveRoute($routeName, $output = "active")
Examples:
If the current route is home
, function isActiveRoute('home')
would return string active
.
The *
wildcard can be used for resource routes.
Function isActiveRoute('user.*')
would return string active
for any current route which begins with user
.
Compares given URL path with current URL path.
isActiveURL($url, $output = "active")
Examples:
If the current URL path is /about
, function isActiveURL('/about')
would return string active
.
Detects if the given string is found in the current URL.
isActiveMatch($string, $output = "active")
Examples:
If the current URL path is /about
or /insideout
, function isActiveMatch('out')
would return string active
.
Compares given array of route names with current route name.
areActiveRoutes(array $routeNames, $output = "active")
Examples:
If the current route is product.index
or product.show
, function areActiveRoutes(['product.index', 'product.show'])
would return string active
.
The *
wildcard can be used for resource routes, including nested routes.
Function areActiveRoutes(['user.*', 'product.*'])
would return string active
for any current route which begins with user
or product
.
Compares given array of URL paths with current URL path.
areActiveURLs(array $urls, $output = "active")
Examples:
If the current URL path is /product
or /product/create
, function areActiveURLs(['/product', '/product/create'])
would return string active
.
Many thanks to:
- @Jono20201 for implementing helper functions
- @judgej for implementing route wildcards