A tool to highlight the active item of a simple HTML menu.

Almost every menu drawn by the designer in the layout has a slightly different display for the current menu item on which the user is currently located. These are elementary techniques for increasing usability. Most often, such active menu items try to somehow highlight the color.

Menus are usually implemented on an unnumbered list, and in order to make the current menu item active, the current active classes are added to it:

 <li class="current active"> <a href="#link">Current link</a> </li> 

In fact, it is customary to single out two types of links that need to be highlighted:

• Current link (current) - the menu item on which the user is currently located
• Active links (active) - menu items that are parent relative to the current menu item that the user is currently on

')
Of course, if you use Symfony, you have the opportunity to use KNPMenuBundle , where you can customize the highlight of the active item, although if you do it for the first time, it may seem complicated. But if you have a simple HTML menu with only several levels of nesting and you are too lazy to transfer it into OOP menu like KNPMenuBundle , I suggest ActiveMenuItemBundle library, which will help you in highlighting the current menu item.

The project is open source , distributed under the MIT license and is available for download:

• Github
• Packagist

Installation

The easiest way is to install the latest version of ActiveMenuItemBundle for a symfony project with Composer :

 { "require": { "bw/active-menu-item-bundle": "1.1.*@dev" } } 

and after - register the bundle in app/AppKernel.php :

 public function registerBundles() { $bundles = array( // other bundles... new BW\ActiveMenuItemBundle\BWActiveMenuItemBundle(), ); 

Using

You now have several new filters and features in Twig templates that will help you determine the active menu item.

In order to check whether the menu item’s route matched the current route, use the is_active filter .
Example 1:

 <li class="{{ 'route_name'|is_active }}"> <a href="{{ path('route_name') }}">Current link</a> </li> 

If the route matched, the filter will return the current active line.

For the parent menu item of a multi-level menu, to check if the current route matches its child subpoints — use the is_active function , passing the array of child routes to it with the first argument, and the route of this menu item with the second argument.
Example 2:

 <li class="{{ is_active(['child_route_1', 'child_route_2'], 'parent_route') }}"> <a href="{{ path('parent_route') }}">Parent link</a> <ul> <li class="{{ 'child_route_1'|is_active }}"> <a href="{{ path('child_route_1') }}">Child link</a> </li> <li class="{{ 'child_route_2'|is_active }}"> <a href="{{ path('child_route_2') }}">Current link</a> </li> </ul> </li> 

If the child_route_2 child_route_2 coincided with the Current link reference, then the current active classes will be assigned to it, and only the active class will be assigned to its parent with the parent_route parent_route .

If you need to work with the request URI instead of the routes, use the is_active_uri filter and the is_active_uri function that work exactly the same way, you can pass the request URI into them, which can be generated by the path function supplied from the symfony box.
Example 3:

 <li class="{{ path('route_name')|is_active_uri }}"> <a href="{{ path('route_name') }}">Current link</a> </li> 

Demo

To view an example demo, you need to import the routing in the app/config/routing_dev.yml for the dev mode:

 bw_active_menu_item: resource: "@BWActiveMenuItemBundle/Resources/config/routing.yml" prefix: /bw/demo/active-menu-item 

Then run the built-in php app/console server:run in dev mode and go to localhost:8000/bw/demo/active-menu-item/index localhost:8000/bw/demo/active-menu-item/index . Here is the Twig template demo code .

Conclusion

I would be glad if my bandle is useful to someone, I think the tool turned out to be useful, simple and has excellent performance for a small HTML menu. I didn’t test large and complex menus, but based on the simplicity and speed of code execution, it should do well, the main thing is to make the right decision where to use routs, and where the request URI is (here you will need to think a little).
Who cares - this is the code that is responsible for the operation of filters and functions, so that they do not search for a long time.

Thank you all for your attention and pleasant work!

PS I understand, it's easy to press the arrows, but if we take a minus, then please work out in the comments to describe why.