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:
  2. {
      "url": "/your-page-link",
      "name": "your page",
      "slug": "your-route-name" // it should be your route name
    },
  3. Your page's slug should be the own route name:
  4. use App\Http\Controllers\dashboard\ControllerName;
    Route::get('/your-page-link', [ControllerName::class, 'ClassName'])->name('Alias');
  5. To add item as a sub menu item:
  6. {
      "name": "Dashboards",
      "icon": "menu-icon tf-icons ri-home-smile-line",
      "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
        },
      ]
    },
  7. If you create a submenu page like the above then its parent's (div) slug should be prefixed to your page's slug:
  8. use App\Http\Controllers\dashboard\Analytics;
    Route::get('/dashboard/analytics', [Analytics::class, 'index'])->name('dashboard-analytics');
  9. 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:
  2. <ul class="menu-inner py-1">
      @foreach ($menuData[0]->menu as $menu)
        ...
      @endforeach
    </ul>
  3. The horizontalMenu.blade.php file is used for the Horizontal layout:
  4. <ul class="menu-inner">
      @foreach ($menuData[1]->menu as $menu)
        ...
      @endforeach
    </ul>
  5. Here, we render our submenu. We used the same files for the horizontal menu and vertical menu.
  6. <ul class="menu-sub">
      @if (isset($menu))
        @foreach ($menu as $submenu)
          ...
        @endforeach
      @endif
    </ul>
© 2017- Pixinvent, Hand-crafted & Made with ❤️