Skip to content

Instantly share code, notes, and snippets.

@lavary
Last active Jun 17, 2018
Embed
What would you like to do?
Making multiple menus in a Bootstrap navbar

#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.

@evertramos
Copy link

evertramos commented Aug 27, 2014

Nice Job!

Hope I can learn enough to help it out somehow.

Cheers!

@lavary
Copy link
Author

lavary commented Oct 15, 2014

Thanks you :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment