Here I want to make one submenu active out of four submenu. This is for dynamic slug .
<div class="solution_tabs">
#foreach($allMenu as $menu)
<ul class="submenu">
#if(isset($menu->submenus))
#foreach($menu->submenus as $submenu)
#if(isset($submenu->page->slug))
<li class="active">{{ $submenu->name}}</li>
#else
<li>{{ $submenu->name}}</li>
#endif
#endforeach
#endif
</ul>
#endforeach
</div>
same as this image,i want one active submenu from dynamic submeun of the menu
You should compare the current URL with your link URLs in order to detect coincidences. One way to accomplish it could be injecting request in your blade file, using
#inject('request', 'Illuminate\Http\Request')
and then check for matches like this:
<li class="{{ $request->segment(1) == $submenu->page->slug ? 'active' : '' }}">{{ $submenu->name}}</li>
Please note that segment() is 0 based, so segment(1) works when your url is like example.com/segment(0)/page->slug
I have the code below in my view, but when i route to the page, the tab isn't showing as active. I search for this on answer on SO but it wouldn't solve my problem..
What am i not doing right?
I am using laravel version 5.6
VIew
<ul id="main-menu-navigation" data-menu="menu-navigation" class="nav navbar-nav">
<li class="nav-item {{ Request::path() == '/admin/dashboard/foods/all' ? 'active' : '' }}"><a href="/admin/dashboard/foods/all" class="nav-link">
<img src="/images/menubar/items.png" width="30px" height="30px" border="0" alt="Module Icon"/>
<span>Food Items</span></a>
</li>
</ul>
First i recommend you to put the logic in a directive, so the html look creaner and the logic is separated from the view.
In your AppServiceProvider you just put this
Blade::directive('menuActive',function($expression) {
//explode the '$expression' string to the varibles needed
list($route, $class) = explode(', ', $expression);
//then we check if the route is the same as the one we are passing.
return "{{ request()->is({$route}) ? {$class} : '' }}";
});
know in your view you just add
<ul id="main-menu-navigation" data-menu="menu-navigation" class="nav navbar-nav">
<li class="nav-item #menuActive('admin/dashboard/foods/all', 'active')"><a href="/admin/dashboard/foods/all" class="nav-link">
<img src="/images/menubar/items.png" width="30px" height="30px" border="0" alt="Module Icon"/>
<span>Food Items</span></a>
</li>
I'm not sure what Request::path() is returning, but it doesn't match your check for /admin/dashboard/foods/all (honestly, likely an issue with leading /)
Also, there is a method called is() on the request() helper that determines if the current route matches a given value, so use as:
<li class="nav-item {{ request()->is('admin/dashboard/foods/all') ? 'active' : '' }}"> ...
And it should work.
My view is like this :
<ul class="nav nav-tabs nav-cat">
#foreach($countries as $country)
<li role="presentation">{{ ucfirst($country->name) }}</li>
#endforeach
</ul>
I want add class="active" in li tag. So, when the tab clicked, the li tag will active. And I want first loop will active too
How can I do it?
If you will follow instructions about The Loop Variable you will find usefull $loop->first helper. It returns true if it's first item in an array. So you can do this:
#foreach($items as $item)
<li class="{{ $loop->first ? 'active' : '' }}">...</li>
#endforeach
Then on tab class click if you want to move class to active tab you should make it by using javascript
You could use javascript to do this also!
Set an ID to your li tag.
Get your li tag element by the id.
.addClass('active');
I have used a laravel package in the past if you need a quick fix
https://github.com/dwightwatson/active
Just Use $loop->first active in your li class.
class="{{ $loop->first ? 'active' : '' }}"
Sample example:-
#foreach ($category as $v_cat)
<li class="{{ $loop->first ? 'active' : '' }}">{{$v_cat->category_name}}</li>
#endforeach
I've been wondering around looking for solutions, but can't really understand especially when creating helpers. I'm new in Laravel and I want a simple or if not a detailed instruction on how to set the active class for my bootstrap navbar.
Here's what I've done so far, but can't get it done:
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li class="">Home
</li>
<li {{ Request::is('about*') ? ' class="active"' : null }}>About Us
</li>
<li>Login
</li>
</ul>
</nav>
<h2 class="">Tobacco Prevention and Control Program</h2>
</div>
EDIT
Setting class="active" will make all nav-pills active. The intended effect is that only the li of the current page have the active class.
If you are working with named routes. You can use this approach in your views:
{{ Route::currentRouteNamed('about') ? 'active' : '' }}
or
{{ Route::is('about') ? 'active' : '' }}
The Illuminate\Routing\Router#is(...) is an alias of the Illuminate\Routing\Router#currentRouteNamed(...).
Your code is working fine, but you have to use it for every link that can be active. It is better to return only class name, not class="..." so you can add other classes.
Be careful when using * at the end (about*). If you use /* for home page then it will always be marked as active (because every other page starts with /).
<ul class="nav nav-pills pull-right">
<li class="{{ Request::is('/') ? 'active' : '' }}">
Home
</li>
<li class="{{ Request::is('about') ? 'active' : '' }}">
About Us
</li>
<li class="{{ Request::is('auth/login') ? 'active' : '' }}">
Login
</li>
</ul>
You can also move {{ Request::is('/') ? 'active' : '' }} to helper function/method.
<ul class="nav nav-second-level">
<li class="{{ Request::segment(1) === 'programs' ? 'active' : null }}">
<a href="{{ url('programs' )}}" ></i> Programs</a>
</li>
<li class="{{ Request::segment(1) === 'beneficiaries' ? 'active' : null }}">
Beneficiaries
</li>
<li class="{{ Request::segment(1) === 'indicators' ? 'active' : null }}">
Indicators
</li>
</ul>
Throw this in your helper.php
function set_active($path, $active = 'active') {
return call_user_func_array('Request::is', (array)$path) ? $active : '';
}
Use it like so
<li class="{{ set_active(['about*']) }}">About Us
You can pass a single string to a route or multiple and wildcards.
See more detail on Laravel Trick
Set a section on your blade file (let home.blade.php) like
#section('Home', 'my-active-class')
And set a section on your another blade file (let about.blade.php) like
#section('About', 'my-active-class')
and yield this section on app.blade.php (Suppose you are extending from app.blade.php)
...
<li class="#yield('Home')">Home</li>
<li class="#yield('About')">About</li>
...
Request::path() returns the request uri, for example: http://localhost/programs , will return programs, so you can do this:
<li class="{{ Request::path() == 'programs' ? 'active' : '' }}">
</i> Programs
</li>
solution is
<ul class="nav navbar-nav pull-right">
<li class="{{ Request::is('/') ? 'active' : '' }}">
Home
</li>
<li class="{{ Request::is('about') ? 'active' : '' }}">
About Us
</li>
<li class="{{ Request::is('whyus') ? 'active' : '' }}">
Why Us
</li>
</ul>
This is simple: to get your links to be active when using bootstrap, all you need is an if statement inside the class link, for instance: i have my current url as http://example.com/home
<li class="{{ Request::url() == url('/home') ? 'active' : '' }}"><a href="/home" ></li>
Home
</a>
and you are good to go.
The solution given by #Daniel Antos is best answer, as I have found. Mr. Danial Antos also warned about using * at the end (about*). Because while using /* for home page then it is always marked as active (because every other page starts with /). So, I have used as follows and it worked fine for me:
{{ (Request::is('users') || Request::is('users/*') ? 'active open' : '') }}
I think this would be simple, and it works for me.
<li class="{{ Request::segment(1)=='vehicles' ? 'active' : '' }}">
Vehicles
</li>
I found the solution:
composer require devmarketer/easynav
More details : https://github.com/DevMarketer/LaravelEasyNav
use
Request::is('[level]') ? 'active' : ''
In case of multilevel, use:
Request::is('[level]', '[level]/*') ? 'active' : ''
<ul class="nav nav-second-level">
<li class={{ Request::is('/') ? 'active' : '' }}>
<a href="{{ url('programs' )}}" ></i> Programs</a>
</li>
<li class="{{ Request::segment(1) === 'beneficiaries' ? 'active' : null }}">
Beneficiaries
</li>
<li class="{{ Request::segment(1) === 'indicators' ? 'active' : null }}">
Indicators
</li>
</ul>
The Easiest way is to add class active :-
#if (request()->routeIs('dashboard'))
class="active"
#endif
If we manage to get the URL path, we can compare it with the routes and put an active class there.
{{'/'==request()->path()?'active':''}}
{{'about'==request()->path()?'active':''}}
I have created a simple but fun and easy to use package named Active which can solve your problem and maybe more...
I will be glad to see your comments.
Link of the package:
https://github.com/tuytoosh/active
I have a dropdown and I have styled it in a way that the current opened li is colored red.
This dropdown menu locates at the left of the page. and this menu exist in all pages.
All pages just set the content of other div in the page but the menu is always for all of them (I hope you get me).
In the controller I do this:
return View::make('restaurants.admins')->with('admin', $admin)->with('verticalMenu' , 'Admin');
So in the view I want to check this verticalMenu value, if it is admin, I will set admin's li class to open class and so on.
I will show you an example of what I want.
this is li that is closed
<li class="dropdown">
<a href="javascript:;">
<i class="fa fa-user"></i> Restaurant <span class="caret"></span>
</a>
<!-- more html here -->
</li>
This is li that is opened because it has the class open
<li class="dropdown active opened">
<a href="javascript:;">
<i class="fa fa-tasks"></i> Profile <span class="caret"></span>
</a>
<!-- more html here -->
</li>
So basically, I need to check the {{$verticalMenu}} before each li, right?, if yes, how please? if no, what is the correct way please?
After your answer
This is the mistake page, please look how the profile li is opened:
![Screen shot of the actual page][1]
This is the good one, where everything is perfect:
The {{ }} basically turns a code like this:
{{ $verticalMenu }}
Into this:
<?php echo $verticalMenu; ?>
What you are trying to achieve is this:
<?php echo $verticalMenu == 'Admin' ? 'active opened' : '' ?>
So the most straight-forward way to do it with blade syntax is:
<li class="dropdown {{ $vericalMenu == 'Admin' ? 'active opened' : '' }}">
<!-- The rest of the list content here -->
</li>