ui:collapse

Indicates that a menu component collapses.

For example, the ui:menuList component registers this event and handles it when it’s fired.

1<aura:registerEvent name="menuCollapse"  type="ui:collapse"
2                    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.

1<ui:menu>
2    <ui:menuTriggerLink aura:id="trigger" label="Contacts"/>
3        <ui:menuList class="actionMenu" aura:id="actionMenu" 
4                     menuCollapse="{!c.addMyClass}" menuExpand="{!c.removeMyClass}">
5            <ui:actionMenuItem aura:id="item1" label="All Contacts" 
6                               click="{!c.doSomething}"/>
7            <ui:actionMenuItem aura:id="item2" label="All Primary" click="{!c.doSomething}"/>
8        </ui:menuList>
9</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.

1({
2    addMyClass : function(component, event, helper) {
3        var trigger = component.find("trigger");
4        $A.util.addClass(trigger, "myClass");
5    },
6    removeMyClass : function(component, event, helper) {
7        var trigger = component.find("trigger");
8        $A.util.removeClass(trigger, "myClass");
9    }
10})

Lightning Components Developer Guide

ui:collapse