Making multiple menus in a Bootstrap navbar

bootstrap-navbar.md

#Laravel Menu: Bootstrap Navbar

It is possible to create multiple menu instances in a single navbar. I'm going to use Bootstrap default navbar for this demonstration:

First of all we create our menu objects in app/routes.php or app/start/global.php or any other place you desire as long as it is auto loaded when a request hits your application.

routes.php

<?php
Menu::make('mainNav', function($m){
	
	$m->add('Link');
	$m->add('Link');
	$m->add('Dropdown');

	$m->dropdown->add('Action');
	$m->dropdown->add('Another Action');
	$m->dropdown->add('Something else here')->divide();

	$m->dropdown->add('Separated link');

	$m->divider();

	$m->dropdown->add('One more separated link');
});


Menu::make('loginNav', function($m){
	
	$m->add('Link');
	$m->add('dropdown');

	$m->dropdown->add('Action');
	$m->dropdown->add('Another Action');
	$m->dropdown->add('Something else here')->divide();
	$m->dropdown->add('Separated link');
});
?>

now Let's just imagine we have a view named navbar.blade.php in which we're going to put our Bootstrap navbar boilerplate.

we just copy and paste the bootstrap navbar codes into the file:

navbar.blade.php

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

       @include('bootstrap-navbar-items', array('items' => $mainNav->roots()))

      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">

        @include('bootstrap-navbar-items', array('items' => $loginNav->roots()))

      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

as you can see another partial view is included into this file named bootstrap-navbar-items. This view is responsible for rendering the items to the deepest level.

here is how it works:

booststrap-navbar-items.blade.php

@foreach($items as $item)
  <li{{$item->builder->attributes($item->attr())}}@if($item->hasChildren()) class="dropdown" @endif>
      @if($item->link)<a{{$item->builder->attributes($item->link->attr())}} href="{{ $item->url() }}" @if($item->hasChildren()) class="dropdown-toggle" data-toggle="dropdown" @endif>
        {{ $item->title }}
        @if($item->hasChildren()) <b class="caret"></b> @endif
      </a>
      @else
        {{$item->title}}
      @endif
      @if($item->hasChildren())
        <ul class="dropdown-menu">
              @include('bootstrap-navbar-items', array('items' => $item->children()))
        </ul> 
      @endif
  </li>
  @if($item->divider)
  	<li{{$item->builder->attributes($item->divider)}}></li>
  @endif
@endforeach

As you see, this file calls itself recursively to go as deep as required. The first time this file is loaded from within the navbar.blade.php it recieves an array of items at root level and goes as deep as required. I think the code inside bootstrap-navbar-items.blade.php is Self-explanatory but if this block of code doesn't make sense to you, you can have a look at 'View methods' in README file or write about you problems here

That's all. Now you can have your menu objects in a Bootstrap navbar.

You can apply this method to your own views and your designs as long as you use the right view methods.

Hope this helps someone.

Happy coding.

Thanks you :)