Skip to content

Blade Bootstrap Template

Alvaro Vasconcelos edited this page Aug 10, 2018 · 6 revisions

The following view files will get you started with a basic Bootstrap navbar using the Blade template engine.


navbar.blade.php

Recommended save to views/partials/menu.

<nav class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a href="#" class="navbar-brand">Caffeinated Menu</a>
        </div>

        <div class="collapse navbar-collapse" id="menu-collapse">
            <ul class="nav navbar-nav">
                @include('partials.menu.items', ['items'=> $menu_example->roots()])
            </ul>
        </div>
    </div>
</nav>

items.blade.php

Recommended save to views/partials/menu.

@foreach($items as $item)
    <li @if($item->hasChildren())class ="dropdown"@endif>
        @if($item->link) <a @if($item->hasChildren()) class="dropdown-toggle" data-toggle="dropdown" @endif href="{{ $item->url() }}">
            {!! $item->title !!}
            @if($item->hasChildren()) <b class="caret"></b> @endif
        </a>
        @else
            {{$item->title}}
        @endif
        @if($item->hasChildren())
            <ul class="dropdown-menu">
                @foreach($item->children() as $child)
                    <li><a href="{{ $child->url() }}">{{ $child->title }}</a></li>
                @endforeach
            </ul>
        @endif
    </li>
    @if($item->divider)
        <li{{\HTML::attributes($item->divider)}}></li>
    @endif
@endforeach

For Bootstrap 4+ :

@foreach($items as $item)
    <li class ="nav-item @if($item->hasChildren()) dropdown @endif @if($item->isActive()) active @endif">
       <a class="nav-link @if($item->hasChildren()) dropdown-toggle @endif"  @if($item->link) href="{{ $item->url() }}" @endif
       @if($item->hasChildren()) id="dropdown-{{$loop->index}}" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" @endif >
            {!! $item->title !!}
            @if($item->hasChildren()) <b class="caret"></b> @endif
        </a>
        @if($item->hasChildren())
            <div class="dropdown-menu" aria-labelledby="dropdown-{{$loop->index}}">
                @foreach($item->children() as $child)
                    <a class="dropdown-item" href="{{ $child->url() }}">{{ $child->title }}</a>
                    @if($child->divider)
                        <div class="dropdown-divider"></div>
                    @endif
                @endforeach
            </div>            
        @endif
    </li>
@endforeach

To include the dynamic menu into the navigation menu as a drop down list:

 <ul class="nav navbar-nav">
             <li class="dropdown">
                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                    aria-expanded="false">Menu<span class="caret"></span></a>
             <ul class="dropdown-menu">
                 @include('partials.menu.items', ['items'=> $menu_example->roots()])
             </ul>
             </li>
             </ul>