Question

I’m using Twitter Bootstrap and Symfony 2 with Twig. I have this for all my pages:

<div class="navbar navbar-inverse navbar-static-top"> 
            <div class="navbar-inner">
                <a class="brand" href="{{ path('home') }}">BudgetTracker</a>
                <ul class="nav">
                    <li class="active"><a href="{{ path('expenses') }}">Expenses</a></li>
                    <li><a href="#about">Reports</a></li>
                    <li><a href="{{ path('categories') }}">Categories</a></li>
                    <li><a href="#contact">Months</a></li>
                    <li><a href="#contact">Bank Accounts</a></li>
                    </ul>
            </div>
</div>

I don’t want to copy it on each page… The problem is that the class active attribute should be put only for the cuurent page. Is there a way to succeed without using JavaScript, only with some king of macro or include? Thank you very much in advance!

---

UPDATE

<div class="navbar navbar-inverse navbar-static-top"> 
    <div class="navbar-inner">
        <a class="brand" href="{{ path('home') }}">BudgetTracker</a>
        <ul class="nav">
            {% if var == 'Expenses' %}
            <li class="active"><a href="{{ path('expenses') }}">Expenses</a></li>
            {% else %}
            <li><a href="{{ path('expenses') }}">Expenses</a></li>
            {% endif %}

            {% if var == 'Reports' %}
            <li class="active"><a href="#">Reports</a></li>
            {% else %}
            <li><a href="#">Reports</a></li>
            {% endif %}

            {% if var == 'Categories' %}
            <li class="active"><a href="{{ path('categories') }}">Categories</a></li>
            {% else %}
            <li><a href="{{ path('categories') }}">Categories</a></li>
            {% endif %}

            {% if var == 'Months' %}
            <li class="active"><a href="#">Months</a></li>
            {% else %}
            <li><a href="#">Months</a></li>
            {% endif %}

           {% if var == 'Bank Accounts' %}
            <li class="active"><li><a href="#">Bank Accounts</a></li>
            {% else %}
            <li><li><a href="#">Bank Accounts</a></li>
            {% endif %} 
            </ul>
    </div>
</div>

My not very elegant try. And I call it with:

{% include 'EMBudgetTrackerBundle::navbar.html.twig' with {'var':'Categories'} %}

Answer 1

It is quite simple:

1. Define this as a single twig with
   {% block menu_block %} //your content here {% endblock %}
2. Use your block in every page
   {% block menu_block %} {{ parent() }} {% endblock %}
3. Make conditional statements for give your class at the current menu element. Obviously you have to pass to your twig (or retrieve from request, i.e.) the name or id of your page, to make what you’re trying to do