Manage Menus and other Nav Elements in Laravel Apps with Php

Manage Menus and other Nav Elements in Laravel Apps with Php cover image

Laravel Navigation is meant to be the spiritual successor of the Laravel Menu. Laravel Menu will still be actively maintained, but there are a few principal differences between the two packages.

The main goal of Laravel Menu is to build HTML menus from PHP. Laravel Navigation describes an application’s navigation tree, which can be used as a base to create navigational elements like menus and breadcrumbs. Laravel Menu has a rich API for HTML generation. Laravel Navigation doesn’t do any HTML generation (although we might ship some Blade files in the future). Instead, Laravel Navigation should give you the flexibility to build your own UI without worrying about the complexity of navigation trees and active state. Think of it as a renderless component.

Installation

You can install the package via composer by running this command:

composer require spatie/laravel-navigation

Usage

<?php

app(Navigation::class)
    ->add('Home', route('home'))
    ->add('Blog', route('blog.index'), function (Section $section) {
        $section
            ->add('All posts', route('blog.index'))
            ->add('Topics', route('blog.topics.index'));
    })
    ->addIf(Auth::user()->isAdmin(), function (Navigation $navigation) {
        $navigation->add('Admin', route('admin.index'));
    });

A navigation object can be rendered to a tree, or to breadcrumbs.

Some examples when visiting /blog/topics/laravel:

<?php

// Render to tree
app(Navigation::class)->tree();
[
    { "title": "Home", "url": "/", "active": false, "children": [] },
    {
        "title": "Blog",
        "url": "/blog",
        "active": false,
        "children": [
            { "title": "All posts", "url": "/blog", "active": false, "children": [] },
            { "title": "Topics", "url": "/blog/topics", "active": true, "children": [] }
        ],
    },
    { "title": "Admin", "url": "/admin", "active": false, "children": [] }
]
<?php

// Append additional pages in your controller
app(Navigation::class)->activeSection()->add($topic->name, route('blog.topics.show', $topic));

// Render to breadcrumbs
app(Navigation::class)->breadcrumbs();
[
    { "title": "Blog", "url": "/blog" },
    { "title": "Topics", "url": "/blog/topics" },
    { "title": "Laravel", "url": "/blog/topics/laravel" }
]

For more details and source code, you can visit the complete documentation on Github.

Written by

Rizwan Aslam

Founder and CEO of CodeBrisk, with years of experience building web applications with Laravel and leading a team of expert developers.

More about Rizwan
Book a free call
Book a call with CodeBrisk