4

In the Laravel Backpack docs they show an image that appears to have dropdown menus for the sidebar navigation menu, but I can't find anywhere that says how to use them. Is there a built in way or do I have to write my own styles?

enter image description here

Casey
  • 536
  • 2
  • 14
  • 28

2 Answers2

6

In resources/views/vendor/backpack/base/inc/sidebar.blade.php you can add your own menu-items. Using .treeview and .treeview-menu you can make those items expandable:

See also the source code of that image.

<li class="treeview">
  <a href="#"><i class="fa fa-key"></i> <span>Roles & Permissions</span> <i class="fa fa-angle-left pull-right"></i></a>
  <ul class="treeview-menu">
    <li>
      <a href="{{ url(config('backpack.base.route_prefix', 'admin') . '/role') }}"><span>Roles</span></a>
    </li>
    <li>
      <a href="{{ url(config('backpack.base.route_prefix', 'admin') . '/permission') }}"><span>Permissions</span></a>
    </li>
  </ul>
</li>
Victor
  • 706
  • 2
  • 7
  • 20
  • @Victor I'm new to Backpack. How do we get vendor views into our 'resources/views' folder, should they be copied manually? – lexeme Oct 11 '18 at 13:57
  • 2
    The new link (source code) for the demo sidebar is https://github.com/Laravel-Backpack/Demo/blob/master/resources/views/vendor/backpack/base/inc/sidebar_content.blade.php – Oscar Torres Mar 10 '20 at 03:31
4

As Oscar Torres pointed out, the new demo source for a nested menu lives here.

Backpack now uses Bootstrap's nav-dropdown class(es) to achieve these results:

<li class="nav-item nav-dropdown">
    <a class="nav-link nav-dropdown-toggle" href="#"><i class="nav-icon la la-group"></i> Authentication</a>
    <ul class="nav-dropdown-items">
        <li class="nav-item"><a class="nav-link" href="{{ backpack_url('user') }}"><i class="nav-icon la la-user"></i> <span>Users</span></a></li>
        <li class="nav-item"><a class="nav-link" href="{{ backpack_url('role') }}"><i class="nav-icon la la-group"></i> <span>Roles</span></a></li>
        <li class="nav-item"><a class="nav-link" href="{{ backpack_url('permission') }}"><i class="nav-icon la la-key"></i> <span>Permissions</span></a></li>
    </ul>
</li>
Joel Mellon
  • 3,672
  • 1
  • 26
  • 25