laravelista / Ekko by mabasic

Framework agnostic PHP package for marking navigation items active.
526,139
279
12
Package Data
Maintainer Username: mabasic
Maintainer Contact: mario@laravelista.hr (Mario Bašić)
Package Create Date: 2015-05-22
Package Last Update: 2021-03-25
Home Page:
Language: PHP
License: MIT
Last Refreshed: 2024-03-26 03:08:23
Package Statistics
Total Downloads: 526,139
Monthly Downloads: 7,398
Daily Downloads: 452
Total Stars: 279
Total Watchers: 12
Total Forks: 28
Total Open Issues: 0

Ekko

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

Become a Patron

Installation

From the command line:

composer require laravelista/ekko

Laravel 5.5+ will use the auto-discovery function.

If using 5.4 (or if you are not using auto-discovery) you will need to include the service providers / facade 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
];

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

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') or is_active_route('/about').

isActiveRoute, is_active_route

Compares given route name with current route name.

isActiveRoute($routeName, $output = "active")
is_active_route($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, is_active_url

Compares given URL path with current URL path.

isActiveURL($url, $output = "active")
is_active_url($url, $output = "active")

Examples:

If the current URL path is /about, function isActiveURL('/about') would return string active.

isActiveMatch, is_active_match

Detects if the given string is found in the current URL.

isActiveMatch($string, $output = "active")
is_active_match($string, $output = "active")

Examples:

If the current URL path is /about or /insideout, function isActiveMatch('out') would return string active.

areActiveRoutes, are_active_routes

Compares given array of route names with current route name.

areActiveRoutes(array $routeNames, $output = "active")
are_active_routes(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, are_active_urls

Compares given array of URL paths with current URL path.

areActiveURLs(array $urls, $output = "active")
are_active_urls(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