Set a bootstrap menu item as “active” in Symfony 5

In order to define a bootstrap menu item as “active” in a Symfony 5 project, you can add

{% set route_name = app.request.attributes.get('_route') %}

to the top of your base.html.twig. Then a twig condition in the navbar can be implemented as follows:

<li {% if route_name == "user_index" %} class="nav-item active" {% else %} class="nav-item" {% endif %} >

Bootstrap CDN example

This is an example twig base file. You will notice that in order for the sub-routes (users/new, users/1, etc.) to keep the “active” menu, we will be using regex matches against the route name.

The bootstrap navbar has also an ul aligned to the right.

{% set route_name = app.request.attributes.get('_route') %}

<!DOCTYPE html>
<html lang="en">
<head>
  <title>{% block title %}Welcome!{% endblock %}</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
  {% block stylesheets %}{% endblock %}
</head>
<body>

<!-- navbar -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="/">dthlabs.com</a>
  <ul class="navbar-nav mr-auto">
    {% if route_name != "app_login" %}
    <!-- <li {% if route_name == "user_index" %} class="nav-item active" {% else %} class="nav-item" {% endif %} > -->
    <li {% if route_name matches '{^user}' %} class="nav-item active" {% else %} class="nav-item" {% endif %} >
      <a class="nav-link" href="{{ path('user_index') }}">Users</a>
    </li>
    <li {% if route_name matches '{^group}' %} class="nav-item active" {% else %} class="nav-item" {% endif %} >
      <a class="nav-link" href="{{ path('group_index') }}">Groups</a>
    </li>
    {% endif %}
  </ul>
  <!-- right side -->
  <ul class="navbar-nav ml-auto">
    {% if route_name != "app_login" %}
    <li {% if route_name == "app_logout" %} class="nav-item active" {% else %} class="nav-item" {% endif %} >
      <a class="nav-link" href="{{ path('app_logout') }}">Logout</a>
    </li>
    {% else %}
    <li {% if route_name == "app_login" %} class="nav-item active" {% else %} class="nav-item" {% endif %} >
      <a class="nav-link" href="{{ path('app_login') }}">Login</a>
    </li>
    {% endif %}
  </ul>
</nav>

<!-- .container -->
<div class="container" style="margin-top:30px;">
  <!-- <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
   </div> -->
   <!-- /.row -->

  {% block body %}{% endblock %}
</div> <!-- /.container -->
{% block javascripts %}{% endblock %}
</body>
</html>

Leave a Reply Cancel reply