We have three types of menus for two different layouts. We have two variation in vertical layout menu.

• Vertical menu with LivIcons for VERTICAL layout
• Vertical menu with Box icons for VERTICAL layout
• Horizontal menu for HORIZONTAL layout

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

Here is the path: resources/data/menus/

• vertical-menu.json menu for VERTICAL layout
• vertical-menu-boxicons.json menu for VERTICAL layout with box icons.
• horizontal-menu.json menu for HORIZONTAL layout

You'll need to add your page details in both JSON files to appear on your page in the Sidebar.

Option 1: To add item in menu.

    
{
"url": "newPage",
"name": "New Page",
"icon": "mail",
"slug": "new-page"
},
    
  

Option 2: To add item as a sub menu item.

    
{
  "name": "Pages",
  "tag": "2",
  "tagcustom": "badge badge-light-danger badge-pill badge-round float-right mr-50",
  "icon": "home",
  "slug": "",
  "submenu": [
    {
      "url": "/page-test",
      "name": "Test Page",
      "icon": "bx bx-right-arrow-alt"
      "slug": "page-test"
    },
    {
      "url": "/second-page",
      "name": "Second Page",
      "icon": "bx bx-right-arrow-alt"
      "slug": "second-page"
    }
  ]
},
    
  

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

• sidebar.blade.php
• sidebar-submenu.blade.php

The sidebar.blade.php and submenu.blade.php files are used for the Vertical layout.

      
<-------sidebar.blade.php------->

{{-- vertical-menu --}}
@if($configData['mainLayoutType'] == 'vertical-menu')
<div class="main-menu menu-fixed @if($configData['theme'] === 'light') {{" menu-light"}} @else {{'menu-dark'}} @endif
  menu-accordion menu-shadow" data-scroll-to-active="true">
  <div class="main-menu-content">
    <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation"
      data-icon-style="lines">
      @if(!empty($menuData[0]) && isset($menuData[0]))
      @foreach ($menuData[0]->menu as $menu)
      @if(isset($menu->navheader))
      <li class="navigation-header text-truncate"><span>{{$menu->navheader}}</span></li>
      @else
      <li class="nav-item {{ Route::currentRouteName() === $menu->slug ? 'active' : '' }}">
        <a href="@if(isset($menu->url)){{asset($menu->url)}} @endif" @if(isset($menu->newTab)){{"target=_blank"}}@endif>
          @if(isset($menu->icon))
          <i class="menu-livicon" data-icon="{{$menu->icon}}"></i>
          @endif
          @if(isset($menu->name))
          <span class="menu-title text-truncate">{{ __('locale.'.$menu->name)}}</span>
          @endif
          @if(isset($menu->tag))
          <span class="{{$menu->tagcustom}} ml-auto">{{$menu->tag}}</span>
          @endif
        </a>
        @if(isset($menu->submenu))
        @include('panels.sidebar-submenu',['menu' => $menu->submenu])
        @endif
      </li>
      @endif
      @endforeach
      @endif
    </ul>
  </div>
</div>
@endif
{{-- horizontal-menu --}}
@if($configData['mainLayoutType'] == 'horizontal-menu')
<div class="header-navbar navbar-expand-sm navbar navbar-horizontal navbar-light navbar-without-dd-arrow
@if($configData['navbarType'] === 'navbar-static') {{'navbar-sticky'}} @endif" role="navigation"
  data-menu="menu-wrapper">
  <!-- Horizontal menu content-->
  <div class="navbar-container main-menu-content" data-menu="menu-container">
    <ul class="nav navbar-nav" id="main-menu-navigation" data-menu="menu-navigation" data-icon-style="filled">
      @if(!empty($menuData[1]) && isset($menuData[1]))
      @foreach ($menuData[1]->menu as $menu)
      <li class="@if(isset($menu->submenu)){{'dropdown'}} @endif nav-item" data-menu="dropdown">
        <a class="@if(isset($menu->submenu)){{'dropdown-toggle'}} @endif nav-link" href="{{asset($menu->url)}}"
          @if(isset($menu->submenu)){{'data-toggle=dropdown'}} @endif
          @if(isset($menu->newTab)){{"target=_blank"}}@endif>
          <i class="menu-livicon" data-icon="{{$menu->icon}}"></i>
          <span>{{ __('locale.'.$menu->name)}}</span>
        </a>
        @if(isset($menu->submenu))
        @include('panels.sidebar-submenu',['menu'=>$menu->submenu])
        @endif
      </li>
      @endforeach
      @endif
    </ul>
  </div>
  <!-- /horizontal menu content-->
</div>
@endif

{{-- vertical-box-menu --}}
@if($configData['mainLayoutType'] == 'vertical-menu-boxicons')
<div class="main-menu menu-fixed @if($configData['theme'] === 'light') {{" menu-light"}} @else {{'menu-dark'}} @endif
  menu-accordion menu-shadow" data-scroll-to-active="true">
  <div class="main-menu-content">
    <ul class="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation" data-icon-style="">
      @if(!empty($menuData[2]) && isset($menuData[2]))
      @foreach ($menuData[2]->menu as $menu)
      @if(isset($menu->navheader))
      <li class="navigation-header text-truncate"><span>{{$menu->navheader}}</span></li>
      @else
      <li class="nav-item {{ Route::currentRouteName() === $menu->slug ? 'active' : '' }}">
        <a href="@if(isset($menu->url)){{asset($menu->url)}} @endif" @if(isset($menu->newTab)){{"target=_blank"}}@endif>
          @if(isset($menu->icon))
          <i class="{{$menu->icon}}"></i>
          @endif
          @if(isset($menu->name))
          <span class="menu-title text-truncate">{{ __('locale.'.$menu->name)}}</span>
          @endif
          @if(isset($menu->tag))
          <span class="{{$menu->tagcustom}} ml-auto">{{$menu->tag}}</span>
          @endif
        </a>
        @if(isset($menu->submenu))
        @include('panels.sidebar-submenu',['menu' => $menu->submenu])
        @endif
      </li>
      @endif
      @endforeach
      @endif
    </ul>
  </div>
</div>
@endif
      
    

Here is the code of submenu page.

      
<-------sidebar-submenu.blade.php------->
{{-- vertical-menu-submenu --}}
@if($configData['mainLayoutType'] == 'vertical-menu')
<ul class="menu-content">
  @if (isset($menu))
  @foreach ($menu as $submenu)
  <li {{ $submenu->slug === Route::currentRouteName() ? 'class=active' : '' }}>
    <a href="@isset($submenu->url) {{asset($submenu->url)}} @endisset" class="d-flex align-items-center"
      @if(isset($submenu->newTab)){{"target=_blank"}}@endif>
      <i class="bx bx-right-arrow-alt"></i>
      <span class="menu-item text-truncate">{{ __('locale.'.$submenu->name)}}</span>
    </a>
    @if(isset($submenu->submenu))
    @include('panels.sidebar-submenu',['menu'=>$submenu->submenu])
    @endif
  </li>
  @endforeach
  @endif
</ul>
{{-- horizontal-menu submenu --}}
@elseif($configData['mainLayoutType'] == 'horizontal-menu')
<ul class="dropdown-menu">
  @if(isset($menu))
  @foreach ($menu as $submenu)
  <li
    class="@if(isset($submenu->submenu)){{'dropdown dropdown-submenu'}}@endif {{ $submenu->slug === Route::currentRouteName() ? 'active' : '' }}"
    data-menu="@if(isset($submenu->submenu)){{'dropdown-submenu'}} @endif">
    <a class="dropdown-item align-items-center d-flex align-items-center @if(isset($submenu->submenu)){{'dropdown-toggle'}}@endif"
      href="{{asset($submenu->url)}}" data-toggle="dropdown" @if(isset($submenu->newTab)){{"target=_blank"}}@endif>
      <i class="bx bx-right-arrow-alt"></i>
      <span>{{ __('locale.'.$submenu->name)}}</span>
    </a>
    @if(isset($submenu->submenu))
    @include('panels.sidebar-submenu',['menu' => $submenu->submenu])
    @endif
  </li>
  @endforeach
  @endif
</ul>
@endif

{{-- vertical-box-menu --}}
@if($configData['mainLayoutType'] == 'vertical-menu-boxicons')
<ul class="menu-content">
  @if (isset($menu))
  @foreach ($menu as $submenu)
  <li {{ $submenu->slug === Route::currentRouteName() ? 'class=active' : '' }}>
    <a href="@isset($submenu->url) {{asset($submenu->url)}} @endisset" class="d-flex align-items-center"
      @if(isset($submenu->newTab)){{"target=_blank"}}@endif>
      <i class="bx bx-right-arrow-alt"></i>
      <span class="menu-item text-truncate">{{ __('locale.'.$submenu->name)}}</span>
    </a>
    @if(isset($submenu->submenu))
    @include('panels.sidebar-submenu',['menu'=>$submenu->submenu])
    @endif
  </li>
  @endforeach
  @endif
</ul>
@endif