add active class to link with sf2 and twig - php

Question

following simple code:
<li>List</li>
is there a simple way to add an class="active" if the current page matches the _list route?
using the newest PR-Release of symfony2 and twig as template engine

Answer 1

Twig allows for conditionals and the Request object is available throughout the application. If you are including the template, to get the route you want to use:
app.request.attributes.get('_route')
If you are using the render function, you want to use:
app.request.attributes.get('_internal')
With that, you should be able to use:
class="{% if app.request.attributes.get('_route') == '_list' %}active{% endif %}"
or shorter:
class="{{ app.request.get('_route') == '_list' ? 'active' }}"

Answer 2

Sometimes you don't want to do exact matching of a route. For those cases, you can use the "starts with" conditional logic of twig.
As an example, lets assume you are working with books. You have the following routes: book, book_show, book_new, book_edit. You want the navigation item Book to be highlighted for any of those cases. This code would accomplish that.
<a class="{% if app.request.attributes.get('_route') starts with 'book' %}active{% endif %}">Books</a>
<a class="{% if app.request.attributes.get('_route') starts with 'author' %}active{% endif %}">Authors</a>
This example works with at least Symfony 2.3.x

Answer 3

Shortest version:
{% set route = app.request.get('_route') %}
<li class="{{ route starts with 'post' ? 'open' }}"></li>
<li class="{{ route starts with 'category' ? 'open' }}"></li>
Sometimes useful:
{% set route = app.request.get('_route') %}
<li class="{{ 'post' in route ? 'open' }}"></li>
<li class="{{ 'category' in route ? 'open' }}"></li>

Answer 4

With ternary operator:
{% set route = app.request.attributes.get('_route') %}
<ul class="nav navbar-nav">
<li {{ route == 'profile_index' ? 'class="active"' }}><i class="icon-profile position-left"></i> My Profile</li>
<li {{ route == 'influencers_index' ? 'class="active"'}}><i class="icon-crown position-left"></i> Influencers</li>
<li {{ route == 'task_manager_index' ? 'class="active"'}}><i class="icon-alarm-check position-left"></i> Task Manager</li>
</ul>

Answer 5

This is done with symfony 3.4, but probably something similar can be done with SF2.
src\AppBundle\Twig\AppExtension.php
<?php
namespace AppBundle\Twig;
use Symfony\Component\HttpFoundation\RequestStack;
class AppExtension extends \Twig_Extension
{
private $requestStack;
public function __construct(RequestStack $requestStack)
{
$this->requestStack = $requestStack;
}
public function getFunctions()
{
return [
new \Twig_SimpleFunction('activeMenu', [$this, 'activeMenu'])
];
}
/**
* Pass route names. If one of route names matches current route, this function returns
* 'active'
* #param array $routesToCheck
* #return string
*/
public function activeMenu(array $routesToCheck)
{
$currentRoute = $this->requestStack->getCurrentRequest()->get('_route');
foreach ($routesToCheck as $routeToCheck) {
if ($routeToCheck == $currentRoute) {
return 'active';
}
}
return '';
}
}
Add this to services.yml
services:
#... some other services
AppBundle\Twig\AppExtension:
arguments: ["#request_stack"]
Usage:
<ul class="nav navbar-nav">
<li class="{{ activeMenu(['form', 'edit_form']) }}">Form</li>
<li class="{{ activeMenu(['list']) }}">List</li>
</ul>

Answer 6

i found a very good Bundle that handles all this stuff automagically:
https://github.com/KnpLabs/KnpMenuBundle

Answer 7

SF2.2
{{ dump(app.request.server.get('PATH_INFO')) }}

Answer 8

Symfony2.3, in Twig, try this to get uri:
{{ dump(app.request.server.get("REQUEST_URI")) }}

Answer 9

I found more efficient to know if we are on the active page and the link or not:
in file xx.html.twig :
In on your header file
{% set route_name = app.request.attributes.get('_route') %}
And add in html class of twig
{% if route_name matches '{^issue}' %}active{% endif %}

Answer 10

This is how I do it (using Symfony 2.6)
<li {% if app.request.get('_route') == '_homepage' %} class="active" {% endif %}>Student</li>
'_homepage' is the name of route in routing.yml of your bundle and the route looks like this
_homepage:
path: /
defaults: { _controller: CoreBundle:Default:index }

Answer 11

class="class_name {% if loop.index0 == 0 %}CLASSNAME{% endif %}"