Generate an extension package for the HTML navigation menu for Laravel application: LaravelMenu

Quickly generate an extension package for the HTML navigation menu for Laravel application: LaravelMenu has Navigation menus for almost every website. it seems simple to generate these HTML navigation menus, however, as the number of menus increases, it will become more and more troublesome: not only to render some basic HTML, but also to manage which menus are currently activated, if a menu has sub-menus, you also want to activate the parent level of the activated sub-menus. In addition, sometimes you need to insert HTML between some menu items.

To this end, I have compiled an extension package (GitHub address: https://github.com/spatie/laravel-menu) that provides a simple and elegant API with a complete array of documentation, here I will take you through its usage.

Although this extension package is independent of the framework, it is set to be used in the Laravel application.

First, we use Composer to install this extension:

composer require spatie/laravel-menu

Then, register the service provider and facade in providers and aliases of config/app. php:

// config/app.php'providers' => [    // ...    Spatie\Menu\Laravel\MenuServiceProvider::class,],'aliases' => [    // ...    'Menu' => Spatie\Menu\Laravel\MenuFacade::class,],

Next we will use it to generate an HTML navigation menu.

Suppose we want to generate a menu like this:

 
 
    
  
  
Home
    
  
  
About
 
 

The implementation code is as follows:

$menu = Menu::new()    ->add(Link::to('/', 'Home'))    ->add(Link::to('/about', 'About'));

Then we can use the render method in the view to display the menu:

// in a blade viewHere is the menu: {!! $menu !!}

Next we try to generate a more complex menu:

 
 
    
  
  
 
   
 
    
Introduction
 
    
Requirements
 
    
Installation and Setup
 
   
 
    
  
  
 Basic Usage 
   
 
    
Your First Menu
 
    
Working With Items
 
    
Adding Sub Menus
 
   
 
 
 

That's right. this is the navigation menu on the document interface. Note that there is a title before each level-2 sub-menu. The generated code is as follows:

Menu::new()    ->add(Menu::new()        ->link('/introduction', 'Introduction')        ->link('/requirements', 'Requirements')        ->link('/installation-setup', 'Installation and Setup')    )    ->add(Menu::new()        ->prepend('Basic Usage')        ->prefixLinks('/basic-usage')        ->link('/your-first-menu', 'Your First Menu')        ->link('/working-with-items', 'Working With Items')        ->link('/adding-sub-menus', 'Adding Sub Menus')    );

If you want to activate a menu item, you can call the setActive method:

$menu = Menu::new()    ->add(Link::to('/', 'Home'))    ->add(Link::to('/about', 'About')->setActive());

Setting Menu item activation manually is very annoying. In most cases, it is more appropriate to let the code determine which menu items are activated:

$menu = Menu::new()    ->add(Link::to('/', 'Home'))    ->add(Link::to('/about', 'About')->setActive());    ->setActiveFromRequest();

In addition to specifying links, you can also use other methods to point to menu items:

Menu::new()    ->url('/', 'Home')    ->route('contact', 'Contact')    ->action('AcmeController@detail', 'Acme');

There are many other useful methods in this extension package, such as attribute operations, append content, and support for Macro. for the complete documentation, see https://docs.spatie.be/menu/v1 /.

Declaration: This article is a translation. for the original article, see here.