To quickly generate an expansion pack for an HTML navigation menu for Laravel apps: Laravel menu

Almost every site has a navigation menu, and generating these HTML navigation menus can seem simple, but as the number of menus increases it becomes more and more cumbersome: not only to render some basic HTML, but also often to manage which menus are currently active, If a menu has submenus you also want the parent of the Active submenu to be active, and sometimes you need to insert HTML between some menu items.

To do this, I've written an extension package (GitHub address: Https://github.com/spatie/laravel-menu), which provides an easy-to-use API with a full range of documentation, and I'm simply taking you through the process.

Although this expansion pack is independent of the framework, here we set it up for use in the Laravel application.

First we use composer to install this extension:

Composer require Spatie/laravel-menu

Then register the service provider and façade in config/app.php's providers and aliases:

config/app.php ' providers ' = [    //...    Spatie\menu\laravel\menuserviceprovider::class,], ' aliases ' = [    //... ']    Menu ' = = Spatie\menu\laravel\menufacade::class,],

Next we use it to generate an HTML navigation menu.

Let's say we want to create a menu like this:

 
  
  
    
  
   
   
Home
    
  
   
   
About
 
  
  

Here is its implementation code:

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

We can then use the Render method to display the menu in the view:

In a blade viewhere is the menu: {!! $menu!}

Here we try to build a more complex menu:

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

Yes, this is the navigation menu for the document interface, and notice that there is a title in front of each level two submenu. The corresponding 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 a menu item to be active, you can call the SetActive method:

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

Manually setting menu item activation is annoying, and 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 have the flexibility to 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 operation, append content, support macro, etc., please refer to the complete document: https://docs.spatie.be/menu/v1/.

Disclaimer: The text is translated, please see here.

