Laravel Menu

Here, we'll discuss our sidebar menu/Navigation menu. We'll describe every method of our menus. Let's deep dive into it.

Introduction

We have two types of menus for two different layouts.

• Vertical menu for VERTICAL layout
• Horizontal menu for HORIZONTAL layout

We are using a JSON file to store all menus list and render it in our menus. You can find these JSON files in the /resources/menu/ folder.

• horizontalMenu.json menu for HORIZONTAL layout
• verticalMenu.json menu for VERTICAL layout

How to add New Menu Item?

To add your new page navigation link in the sidebar menu/navigation menu, you need to add your page details in both menu JSON files.

1. To add item in menu:
Copy

{
  "url": "/your-page-link",
  "name": "your page",
  "slug": "your-route-name" // it should be your route name
},

2. Your page's slug should be the own route name:
Copy

use App\Http\Controllers\dashboard\ControllerName;
Route::get('/your-page-link', [ControllerName::class, 'ClassName'])->name('Alias');

3. To add item as a sub menu item:
Copy

{
  "name": "Dashboards",
  "icon": "menu-icon tf-icons ti ti-smart-home",
  "slug": "dashboard", // parent slug
  "submenu": [
    {
      "url": "/",
      "name": "Analytics",
      "slug": "dashboard-analytics" // prefixed with parent slug
    },
    {
      "url": "/dashboard/crm",
      "name": "CRM",
      "slug": "dashboard-crm" // prefixed with parent slug
    },
  ]
},

4. If you create a submenu page like the above then its parent's (div) slug should be prefixed to your page's slug:
Copy

use App\Http\Controllers\dashboard\Analytics;
Route::get('/dashboard/analytics', [Analytics::class, 'index'])->name('dashboard-analytics');

5. Note: If you are using localization then you have to add your page name in lang-> {en|fr|de|ar}.json files. Refer to localization for more details.

Pass Menu Json In Views

We have pass our menus json files in all views files using services Provider.

We have created a MenuServiceProvider. Learn more about the service provider from here. In its boot menu, we have decoded the JSON file and made it globally accessible in views (blade) files.

public function boot(): void
{
  $verticalMenuJson = file_get_contents(base_path('resources/menu/verticalMenu.json'));
  $verticalMenuData = json_decode($verticalMenuJson);
  $horizontalMenuJson = file_get_contents(base_path('resources/menu/horizontalMenu.json'));
  $horizontalMenuData = json_decode($horizontalMenuJson);

  // Share all menuData to all the views
  $this->app->make('view')->share('menuData', [$verticalMenuData, $horizontalMenuData]);
}

Rendering Menus

We are rendering our menus in the below files. You can find these files here: /views/layouts/sections/menu

• horizontalMenu.blade.php
• submenu.blade.php
• verticalMenu.blade.php

1. The verticalMenu.blade.php file is used for the Vertical layout:
Copy

<ul class="menu-inner py-1">
  @foreach ($menuData[0]->menu as $menu)
    ...
  @endforeach
</ul>

2. The horizontalMenu.blade.php file is used for the Horizontal layout:
Copy

<ul class="menu-inner">
  @foreach ($menuData[1]->menu as $menu)
    ...
  @endforeach
</ul>

3. Here, we render our submenu. We used the same files for the horizontal menu and vertical menu.
Copy

<ul class="menu-sub">
  @if (isset($menu))
    @foreach ($menu as $submenu)
      ...
    @endforeach
  @endif
</ul>