Using Laravel and Infyom to create a dynamic navbar

If you have a website that’s changing a lot, it can be a pain to keep on updating your static navbar with new links, that’s why this system of having a dynamic navbar which can be updated from a simple form can be really useful. It can allow you to change the links that display in a navbar, be it the name of the link, the route it points to or the order in which they display.

This blog post will be using Laravel 5.5, the Infyom scaffold generator, and Bootstrap 4.

Setting up Laravel, InfyOm and Bootstrap are beyond the scope of this article , The Laravel, InfyOm and Bootstrap docs will tell you everything you need to know about those. Also please take a look at the previous series of articles on Infyom for an introduction to the scaffold system.

Generating a scaffold for the Navbar table

We’re going to create a navbar table that will contain the name of the link, the route it points to, and the order in which the link displays. So this table will have the fields: “name” (string), “route” (string), and “ordering”(integer). So we’ll put these parameters into the infyom scaffold generator, making all three fields required. A step-by-step walkthrough for the infyom scaffolder was done here. Once we’ve created this scaffold, we should have a controller, model, migration, views, and routes. First thing to do is of course run the migration with php artisan migrate . Now we should have a table in which we can store the navbar data.

Displaying the Navbar

Once you’ve got some data populating the navbar table, you need to actually use that data, and display it to the user. The navbar needs to display on every page, and to do that, we need to make use of the View::share method. To do this, we’ll create a middleware that takes all the data from the navbar table, and shares the data across all views:

<?php
 
namespace App\Http\Middleware;
 
use App\Navbar;
use Closure;
use Illuminate\Support\Facades\View;
 
class ViewShare
{
 
    public function handle($request, Closure $next)
    {
 
        $navbars = Navbar::all();
 
        View::share('navbars', $navbars);
 
        return $next($request);
 
    }
 
}

This middleware will be loaded on page load and will always make sure the $navbars  variable is available in the current instance. Now that we have the data, we need to display it to the user. And this is done within the blade template that contains your header/navbar. This navbar will be created the same way that you’d create a standard bootstrap navbar, only we’re passing in the data from $navbars , and sorting by the ‘ordering’ field.

<ul class="navbar-nav ml-auto">
    @if(count($navbars) > 0)
        @foreach($navbars->sortBy('ordering') as $navbar)
 
            <li class="nav-item">
                <a class="nav-link navlink" href="{{ url('/').$navbar->route }}" role="button">{{ $navbar->name }}</a>
            </li>
 
        @endforeach
    @endif
</ul>

You’d ideally want to change the binding of the route attribute to orient it relative to how you’re defining the route, or how your laravel site handles URLs, but with this, you should have working links displaying in your navbar, that also looks good and aligns well with the help of bootstrap.