Laravel中用于Twitter Bootstrap导航的自动活动类

Question

Like most people, I'm using Twitter Bootstrap for the site I'm currently developing in Laravel. So far I'm enjoying using Laravel as a PHP equivalent to Rails, but I'm wondering if there's a better way to do the navigation bars. I'm attempting to make sure that my navbar li tags get the active class automatically, so I have this:

<ul class="nav nav-pills">
@if(URL::current() . "/" == URL::route('home'))
    <li class="active">
@else
    <li>
@endif
    <a href="{{ route('home') }}">Home</a>
</li>
@if(URL::current() == URL::route('about'))
    <li class="active">
@else
    <li>
@endif
    <a href="{{ route('about') }}">About</a>
</li>
</ul>

This'll be fine, for now. But when I've got menus, and more navigations it'll end up looking awful to debug and deal with.

Is there anything akin to the Gem Tabulous for Laravel or a generally nicer way to deal with navigation in Laravel?

Answer 1

I use this:

<li class="{{Request::path() == 'home' ? 'active' : '';}}">
  <a href="/home"><i class="fa fa-home"></i>Home</a>
</li>

Answer 2

Take a look at the Bootstrapper package, it has lots of tools to help you with Twitter Bootstrap. In your example, you could build the navigation like this:

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
    )
));

There's also the shorthand method, less verbose, which I don't particularly like, but can be used:

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about')),
    ))
);

It's important to note that in both examples, Bootstrapper takes care of the active class automatically , comparing the current request URL against the one passed to the item. If, however, you wish to specify a different condition for this to apply, simply pass an active value, or a third value in the array, for the shorter method. Example:

Navigation::pills(array(
    array(
        'label'  => 'Home',
        'url'    => URL::route('home'),
    ),
    array(
        'label'  => 'About',
        'url'    => URL::route('about'),
        'active' => true,
    )
));

or

Navigation::pills(
    Navigation::links(array(
        array('Home', URL::route('home')),
        array('About', URL::route('about'), true),
    ))
);

Answer 3

I found a small snippet which helps with this issue. Hopefully this helps the next persons who search for this. http://mikekoro.com/blog/laravel-4-active-class-for-navigational-menu/

Answer 4

I've created a simple helper for this task. I saved it as /app/helpers/Menu.php . Then in /app/start/global.php I added my helper file to the ClassLoader::addDirectories array like so: _app_path().'/helpers', (if the class is not loaded try running "composer dump-autoload" in the console, more info about adding helpers here )

class Menu {
 public static function item($route, $label='', $class='', $params=array()) {
    $class .= (Route::getCurrentRoute()->getAction()['as']==$route) ? ' active' : '';
    $tag = $class ? '<li class="'.trim($class).'">' : '<li>';
    return $tag.HTML::link(URL::route($route, $params),$label).'</li>'; 
  }
}

In your view. just supply the route name and it will create a LI element with a link inside, the 'active' class is added to the LI element. You can also add custom classes by using the third parameter.

<ul class="menu">
  {{ Menu::item('index','Home') }}
  {{ Menu::item('pages.about','About Us') }}
  {{ Menu::item('pages.contact','Get In Touch','last') }}
  {{ Menu::item('profile-user','Profile','',array('username' => Auth::user()->username)) }}
</ul>

Answer 5

If you wouldn't mind that the solution is jQuery based, then you could try something like:

$('#mainmenu li').removeClass('active');
$('#mainmenu li a[href="'+document.location.href+'"]').parents('li').addClass('active');

where mainmenu is the id of your navbar or any other element that contains the li items.

Answer 6

This is what I use:

<li class="{{ Request::is('/') ? 'active' : '' }}"><a href="/">Home</a></li>
<li class="{{ Request::is('about') ? 'active' : '' }}"><a href="/about">About</a></li>
<li class="{{ Request::is('contact') ? 'active' : '' }}"><a href="/contact">Contact</a></li>

Answer 7

For anyone reading this who's on Laravel 5.4:

<li class="{{Request::path() == 'home' ? 'active' : '';}}">

Needs to become (take out the ending ;):

<li class="{{Request::path() == 'home' ? 'active' : ''}}">

Answer 8

Another useful library could be here https://code.google.com/p/bootstrap-php/source/browse/#svn%2Ftrunk%2FNavbar Not complex, but very easy to use

$oNavbar      = new Bootstrap_Navbar_Handler(array('class' => 'nav-pills'));
$oNavbar->addEntry('Home', array('href' => '/pageurlHome'));
$oNavbar->addEntry('About', array('href' => '/pageurlAbout'));

$oNavbar->setAutoActive(true);
echo $oNavbar->display();

This generates:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <ul class="nav-pills nav">
        <li class="active"><a href="/pageurlHome" class="">Home</a></li>
        <li><a href="/pageurlAbout" class="">About</a></li>
      </ul>
    </div>
  </div>
</div>

by using

$oNavbar->setAutoActive();

the class automatically activates the corresponding entry

Answer 9

Not a Laravel solution, but a simple client side javascript solution I wrote today:

https://github.com/davidmars/bootstrapNavActive

<!--include our little script-->
<script src="https://cdn.rawgit.com/davidmars/bootstrapNavActive/master/BootstrapNavActive.min.js"></script>

<!--initialize the nav element-->
<script>
$( document ).ready(
function(){
    var $mySmartNav=$("#mySmartNav");
    new BootstrapNavActive($mySmartNav);
  }
);
</script>

Improvements on code are welcome ;)

Answer 10

I used this working fine

<li class="{{ Request::is('blogs*') ? 'active' : '' }}">
   <a href="{{ route('blogs.create') }}">Create</a>
</li>