Blog Detail


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

Manage Menus and other Nav Elements in Laravel Apps with Php

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.


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

composer require spatie/laravel-navigation



    ->add('Home', route('home'))
    ->add('Blog', route('blog.index'), function (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:


// Render to 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": [] }

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

// Render to 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.

Published at : 02-02-2022

Author : Rizwan Aslam
Rizwan Aslam

I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.

Launch project