Peter Hoffmann on Stackoverflow @peterhoffmann on twitter Peter Hoffmann on Facebook Contact me per email Subscribe to Atom Feed

Peter Hoffmann

Software Engineer
prev page next page

Highlight Active Menu Item with Twig and Silex

Twig snippet to define a reusable navigation bar. The active page is set in the inherited template.

Posted on August 21, 2012

Using the twig template inheritance it is easy to add a reusable navigation bar with a highlighted active navigation item in all your pages. The idea is based on the Jinja2 Highlighting Active Menu Items Pattern.

The basic template layout.html defines the navigation bar with each an idtentifier and a link name.

{% set navigation_bar = [['index', 'Home Page'], ['blog', 'Blog'], ['archive', 'Archive']] %}
{% set active_page = active_page|default('index') %}
<head><title>Test Page</title><head>
{% block navigation %}
<ul id="navigation">
{% for item in navigation_bar %}
<li{% if item[0] == active_page %} class="active"{% endif%}>
<a href="{{ app.url_generator.generate(item[0]) }}">{{item[1]}}</a></li>
{% endfor %}
{% endblock %}

The pattern uses the Url Generator Service Provider. The identifiers of each item have to be bound to a route in your application.

In an inherited template you can redefine the acitve item. E.g in the template blog.twig the active page is set to the blog.

{% extends "layout.twig" %}
{% set active_page = "blog" %}

If you reuse a template in different Controllers set the active_page when you return a response with render-template.


$app = new Silex\Application();
$app->register(new TwigServiceProvider(), array(
    'twig.path' => __DIR__.'/templates'
$app->register(new Silex\Provider\UrlGeneratorServiceProvider());

$app->get('/', function() use ($app){
    return $app['twig']->render('layout.twig');

$app->get('/blog', function() use ($app){
    return $app['twig']->render('blog.twig');

$app->get('/archive', function() use ($app){
    return $app['twig']->render('blog.twig', array("active_page" => "archive"));

return $app;