I am working with Laravel 5.6 and using following sidemenu link as one of items as the app side menu,
<nav class="navbar navbar-default">
<ul class="nav nav-sidebar">
<li class="active">Home</li>
<li class="{{Request::is('vehicles*') ? 'active' : null}}">My Ads</li>
</ul>
</nav>
and this sidemenu blade file is include with other blade files to show side menu, and above menu link route is following,
Route::get('myads', [
'uses' => 'VehicleController#indexpersonel',
'as' => 'vehicles.myads',
]);
but when I visit myads blade file it is not highlight current menu items. how can fix this probelm?
edit menu bar
<ul class="nav nav-sidebar">
{{dd(Request::path());}}
<li class="{{ (Request::is('vehicles/*') || Request::is('vehicles') ? 'active' : '') }}">My Ads</li>
</ul>
use this
<li class="{{ (Request::is('myads/*') || Request::is('myads') ? 'active' : '') }}">
You need to add /,
<li class="{{Request::is('*/vehicles/*') ? 'active' : null}}">
For More details visit https://laravel.com/docs/5.7/requests
Is() method starts comparing URL from the first segment.
For Example:
1) Your URL is http://127.0.0.1:8000/admin/client/add and you want to check client is exists or not in URL so you need to do something like <li class="{{Request::is('*/client/*') ? 'active' : null}}">
2) http://127.0.0.1:8000/admin/client/add find an admin in URL or not
<li class="{{Request::is('admin/*') ? 'active' : null}}">
I hope this will help you.
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'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 am using this tutorial for creating a custom pagination in Laravel 4.2.
I am getting this code-
<ul class="pagination">
<li class="disabled">
<span>«</span>
</li>
<li class="active">
<span>1</span>
</li>
<li>
2
</li>
<li>
»
</li>
</ul>
for pagination buttons.
But I need to add some AJAX and some JS call with ID's.
So, I want this kind of code for this buttons-
<ul class="pagination">
<li class="disabled" id="prev">
<span>«</span>
</li>
<li class="active" id="page[1]">
<span>1</span>
</li>
<li id="page[2]">
2
</li>
<li id="next">
<span>»</span>
</li>
</ul>
Is it possible?
Please help me.
Thanks in advance for helping.
i will give a simpler approach....
put this in anywhere in views folder. let's say you put it (and named it) as partials/pagination.blade.php
put the following code in pagination.blade.php (modify it to match your view)
#if ($paginator->getLastPage() > 1)
<ul class="pagination">
<li>Previous</li>
#for ($i = 1; $i <= $paginator->getLastPage(); $i++)
<li>{{ $i }}</li>
#endfor
<li>Next</li>
</ul>
#endif
Note: above code is a sample. change the layout to suit your need.
i prefer a tags while writing links.
while calling the paginator, use the following,
{{$paginator->links('partials.pagination')}}
No need to go through all those complicated process.
but more of a chance is, whatever you are trying to do, can be done purely with javascript.
You can extend the lluminate\Pagination\Presenter class and implement its abstract methods. For example (Put it in app/extension folder):
class CustomPresenter extends Illuminate\Pagination\Presenter {
public function getActivePageWrapper($text)
{
$url = $this->paginator->getUrl($this->paginator->getCurrentPage());
$query = parse_url($url, PHP_URL_QUERY);
parse_str($query, $params);
return '<li id="page['.$params['page'].']" class="active">'.$text.'</li>';
}
public function getDisabledTextWrapper($text)
{
return '<li class="disabled">'.$text.'</li>';
}
public function getPageLinkWrapper($url, $page, $rel = null)
{
$query = parse_url($url, PHP_URL_QUERY);
parse_str($query, $params);
$id = $params['page'];
return '<li id="page['.$id.']">'.$page.'</li>';
}
}
Add an entry in composer > autoload > classmap section like this:
//...
"app/tests/TestCase.php",
"app/extensions"
To use the Custom Presenter:
At first, create a view (custom-presenter.php) in app/views directory. Then, replace pagination option in the app/config/view.php configuration file with the new view's name, like this:
'pagination' => 'custom-presenter'
Finally, the following code would be placed in your custom presenter view:
<ul class="pagination">
<?php echo with(new CustomPresenter($paginator))->render(); ?>
</ul>
For prev and next use this JavaScript (I've used jQuery) and include this in you template:
<script>
$(function(){
$('ul.my-custom-pagination>li:first').attr('id', 'prev')
$('ul.my-custom-pagination>li:last').attr('id', 'next')
});
</script>
Above JS code will set the id=prev and id=next, otherwise there will be duplicate ids for first two lis and last two lis. At last, run composer dump from terminal. This an output of this implementation:
<ul class="pagination my-custom-pagination">
<li id="prev">«</li>
<li id="page[1]">1</li>
<li id="page[2]">2</li>
<li id="page[3]" class="active">
3</li><li class="disabled" id="next">»
</li>
</ul>
Read more on the manual.
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>