This project will not be updated for Laravel 5.
NavigationBuilder
A navigation HTML generator for Laravel., (*1)
Installation
"require": {
"bhoeting/navigation-builder": "*"
}
Run composer install
, (*2)
Add the service provider to the providers
array in app/config/app.php
, (*3)
'bhoeting\NavigationBuilder\NavigationServiceProvider',
Then add the facade to the aliases
array, (*4)
'Navigation' => 'bhoeting\NavigationBuilder\Navigation'
Usage
Basic
{{ Navigation::create(['home', 'about', 'contact'] }}
Will generate:, (*5)
<ul class="nav navbar-nav">
<li class="">
<a href="http://localhost:8000/home">Home</a>
</li>
<li class="active">
<a href="http://localhost:8000/about">About</a>
</li>
<li class="">
<a href="http://localhost:8000/contact">Contact</a>
</li>
</ul>
By default, a Bootstrap template is used to generate the HTML. See Advanced on how you can create your own templates.
Also note that the about
item has an a class of active
. This is because the current URL is the same as the about item's link.
Items are also active when the current URL matches a pattern of the item's link. For instance, http://localhost:8000/about/who-we-are
will also make the about
item active., (*6)
The display text and URL for each item are based on the strings provided in the array. You can specify your own like so:, (*7)
{{ Navigation::create(['home' => ['url' => '/'], 'about' => ['text' => 'about-us'], 'contact' => ['route' => 'contact.us']]) }}
Output:, (*8)
<ul class="nav navbar-nav">
<li class="">
<a href="http://localhost:8000/">Home</a>
</li>
<li class="active">
<a href="http://localhost:8000/about">About-us</a>
</li>
<li class="">
<a href="http://localhost:8000/contact">Contact</a>
</li>
</ul>
You can also associate a Font Awesome Icon to be displayed next to the Item's text., (*9)
{{ Navigation::create(['home' => ['url' => '/', 'icon' => 'user']]) }}
Will output:, (*10)
...
<li class="">
<i class="fa fa-user"></i> Home
</li>
Advanced
You can easily re-use and configure Navigations by extending the provided AbstractNavigaiton
and specify your own templates, active class, and Items., (*11)
// app/Acme/Navigation/MasterNavigation.php
<?php namespace Acme\Navigation;
use bhoeting\NavigationBuilder\AbstractNavigation;
class MasterNavigation extends AbstractNavigation {
protected $items = [
'home' => ['url' => '/'],
'about' => ['text' => 'About us'],
'contact' => ['route' => 'contact.page']
];
protected $itemTemplate = 'navigation.item';
protected $containerTemplate = 'navigation.container';
}
Create the templates:
app/views/navigation/item.blade.php
, (*12)
<li class="{{ $item->makeActive('aDifferentActiveClass') }}">
<a href="{{ $item->makeUrl() }}">
{{ $item->getText() }}
</a>
</li>
app/views/navigation/container.blade.php
, (*13)
{{ $navigation->getItemHtml() }}
Then in your view:, (*14)
{{ Navigation::create('Acme\Navigation\MasterNavigation') }}
You can also store Navigation items in the database. First, create a migration like the one below:, (*15)
// app/database/migrations/CreateMasterNavItemsTable.php
<?php
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateNavigationTable extends Migration {
public function up()
{
Schema::create('master_nav_items', function(Blueprint $table)
{
$table->increments('id');
$table->string('name');
$table->string('url')->nullable();
$table->string('route')->nullable();
$table->string('text')->nullable();
});
}
public function down()
{
Schema::drop('master_nav_items');
}
}
Now in your extension of AbstractNavigation
, (*16)
<?php namespace Acme\Navigation;
use bhoeting\NavigationBuilder\AbstractNavigation;
class MasterNavigation extends AbstractNavigation {
protected $table = 'master_nav_items';
protected $itemTemplate = 'navigation.item';
protected $containerTemplate = 'navigation.container';
}