Navigation, highlight current page

Question

I've got a parent layout and derived from that child sites.

The parent layout has a navigation, each navigation point represents one child site.

How do i highlight in the parent layout the currently viewed child site? How shall the if look like?

Answer 1

I know it's an old thread, but still you find it among top 3 on Google, so here's a little update to it.

You can take different aproaches on creating a navigation with a "highlighting class" with Symfony.

1. Check route
As @Sebastian J suggested, you can check with an if else for the route.

<li{% if app.request.get('_route') == 'foo_products_overview' %} class="active"{% endif %}>

Problem: It's not officially supported, as @netmikey pointed out: How to get current route in Symfony 2?

1.1. Check route array
I actually use this on my projects, with one adjustment. I use an in array function, to be able to give more than one route.

<li{% if app.request.attributes.get('_route') in [
    'foo_products_overview',
    'foo_products_detail',
    'foo_products_bar'
] %} class="active"{% endif %}>

1.2. Check route start with ...
A third approach would be what @bernland has suggested. Let's asume we want to match all routes starting with foo_products and we'd like to apply this by magic.

<li{% if app.request.attributes.get( '_route' ) starts with 'foo_products' %} class="active"{% endif %}>

As I said, I use this and haven't had an issue, yet.

2. Use a Bundle/function I'm sure there are other Bundles out there, but I'd recomend you this to create your navigation: https://github.com/KnpLabs/KnpMenuBundle

3. Use a macro edit July 2015
My new favorite is to use a macro like

{% macro menuItem(name, url, subitems) %}
    {% spaceless %}
        {% set subitems = subitems|default({}) %}
        {% set currentUrl = path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params')) %}
        {% set isActive = currentUrl == url %}

        {% for name, suburl in subitems %}
            {% set isActive = not isActive and currentUrl == suburl %}
        {% endfor %}

        <li{% if isActive %} class="is-active"{% endif %}>
            <a href="{{ url }}"{% if subitems|length > 0 %} class="has-sub-menu"{% endif %}>{{ name|trans() }}</a>
            {% if subitems|length > 0 %}
                <ul class="main-sub-menu">
                    {% for name, url in subitems %}
                        {{ _self.menuItem(name, url) }}
                    {% endfor %}
                </ul>
            {% endif %}
        </li>
    {% endspaceless %}
{% endmacro %}

just add this code somewhere in your twig file (not in a {% block %} thing!)
You then can call it like this for a single item:

{{ _self.menuItem('FooBar', path('foo_foobar')) }}

or for a item with subitems:

{{ _self.menuItem('FooBar', path('foo_foobar'), {
    'Foo': path('foo_baz', {slug: 'foo'}),
    "Bar": path('foo_baz', {slug: 'bar'}),
}) }}

Beautiful, isn't it?

Answer 2

Probably not the best option but here is some simple approach for Symfony2 based upon the routes name:

<ul class="nav">
  <li{% if app.request.get('_route') == '_adminIndex' %} class="active"{% endif %}>
    <a href="{{ path('_adminIndex') }}">Admin Home</a>
  </li>
</ul>

Answer 3

Here's what I used (for Symfony 5):

<li class="nav-item{% if (app.request.pathInfo == path('frontend_index')) %} active{% endif %}">

Answer 4

First set a variable in Template its better redable.

{% set page = app.request.get('_route') %}
<li class="nav-item">
            <a class="nav-link {% if page == 'welcome' %}active{% endif %}" href="{{ path('welcome') }}">Home <span class="sr-only">(current)</span></a>
        </li>

Answer 5

Here's what I did:

<a href='{{ path( 'products' ) }}'{% if app.request.attributes.get( '_route' ) starts with 'products' %} class='active'{% endif %}>Products</a>
<ul>
    <li><a href='{{ path( 'products_product1' ) }}'{% if app.request.attributes.get( '_route' ) == 'products_product1' %} class='active'{% endif %}>Product 1</a></li>
    <li><a href='{{ path( 'products_product2' ) }}'{% if app.request.attributes.get( '_route' ) == 'products_product2' %} class='active'{% endif %}>Product 2</a></li>
</ul>

Answer 6

in Silex, I do it like this:

$app->before(function ($request) use ($app) {
    $app['twig']->addGlobal('active', $request->get("_route"));
});

Then in my Twig template file, {{ active }} equals to the current route.

Simple and easy enough!

Answer 7

Create a css class for the highlighted menu item and to each navigation item bind an onClick JS event and when that event is triggered just add the class to the current navigation item and remove it from the others and it should highlight the selected site in the navigation.