Submenu customization per user navigation [CSS Handles]

2020

July

{"base64":" ","img":{"width":105,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":951,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/menus-new-css-handles-with-modifiers-0.png"}}

New CSS Handles with modifiers (submenuWrapper--isOpen and submenuWrapper--isClosed) were added to the Menu app, making it possible to create animation effects when the submenu opens and closes according to the user navigation.

{"base64":" ","img":{"width":3584,"height":2114,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1172665,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/menus-new-css-handles-with-modifiers-1.png"}}

Notice how the menu animation showed above only works because the submenuWrapper--isClosed Handle is being applied.

For more on how to properly use CSS Handles, access the Using CSS Handles for store customization documentation.