<aura:registerEvent name="menuCollapse" type="ui:collapse" description="The event fired when the menu list collapses." />
You can handle this event in a ui:menuList component instance. This example shows a menu component with two list items. It handles the ui:collapse and ui:expand events.
<ui:menu> <ui:menuTriggerLink aura:id="trigger" label="Contacts"/> <ui:menuList class="actionMenu" aura:id="actionMenu" menuCollapse="{!c.addMyClass}" menuExpand="{!c.removeMyClass}"> <ui:actionMenuItem aura:id="item1" label="All Contacts" click="{!c.doSomething}"/> <ui:actionMenuItem aura:id="item2" label="All Primary" click="{!c.doSomething}"/> </ui:menuList> </ui:menu>
This client-side controller adds a CSS class to the trigger when the menu is collapsed and removes it when the menu is expanded.
({ addMyClass : function(component, event, helper) { var trigger = component.find("trigger"); $A.util.addClass(trigger, "myClass"); }, removeMyClass : function(component, event, helper) { var trigger = component.find("trigger"); $A.util.removeClass(trigger, "myClass"); } })