Ekko

Ekko is a Laravel helper package. It helps you mark currently active menu item in your navbar.



Latest Stable Version Total Downloads License Build Status

forthebadge forthebadge

Ekko is a Laravel helper package. It helps you mark currently active menu item in your navbar.

Overview

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

Installation

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
];

API

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').

isActiveRoute

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.

isActiveURL

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.

isActiveMatch

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.

areActiveRoutes

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.

areActiveURLs

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.

Credits

Many thanks to:

  • @Jono20201 for implementing helper functions
  • @judgej for implementing route wildcards

Comments