Tool for highlighting the active item in 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 basic tricks to increase usability. Most often, such active menu items try to highlight in some way.

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

Current link

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

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

Of course, if you use Symfony - you have the opportunity to use it KNPMenuBundle, where you can adjust the highlight of the active item, although if you do this 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 to the OOP type menu KNPMenuBundle, I suggest the ActiveMenuItemBundle library , which will help you in highlighting the current menu item.

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

• Github
• Packagist

Installation

The easiest way is to install the latest version of ActiveMenuItemBundlethe Symfony project using Composer :

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

and then register the bundle in app/AppKernel.php:

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

Using

Now in your Twig templates several new filters and functions are available that will help determine the active menu item.

To check if the route of the menu item matches the current route, use the is_activefilter .
Example 1:

Current link

If the route matches, the filter will return a string current active.

For the parent item of a multilevel menu, to check whether the current route coincided with its child subpoints, use the is_activefunction by passing an array of child routes into it with the first argument, and route the given menu item with the second argument.
Example 2:

Parent link
Child link
Current link

If the route child_route_2for the link matches Current link, then classes will be assigned to current activeit, and parent_routeonly the class will be assigned to its parent with the route active.

If you need to work with request URI instead of routes, use a is_active_urifilter and a is_active_urifunction that work in exactly the same way, you need to pass a request URI to them, which can be generated by the function pathsupplied from the Symfony box.
Example 3:

Current link

Demo

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

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

Then start the embedded server php app/console server:runin dev mode and go to the address localhost:8000/bw/demo/active-menu-item/index. Here is the demo code for the Twig template.

Conclusion

I would be glad if my bundle is useful to someone, I think the tool turned out to be useful, simple and has excellent performance for small HTML menus. I haven’t tested it on 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 the routes and where is the request URI (here you need to think a little).
Who cares - here is the code that is responsible for the operation of filters and functions so that they do not look for a long time.

Thank you all for your attention and enjoy your work!

PS I understand that the arrows are easy to press, but if you are minus - then please, take the trouble to describe why in the comments.