Collapse

ui:collapse

Indicates that the ui:menuList component is collapsed.

::::::tabset{tabs='["Develop", "Specifications"]'}

:::::tab

This event is fired when you collapse the ui:menuList component. To set a handler for the ui:collapse event, use the menuCollapse attribute on ui:menuList.

The following example adds or remove a CSS class to the ui:menuList component when it's collapsed or expanded.

<aura:component>
  <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>
</aura:component>

Here's the client-side controller that handles the adding and removing of the CSS classes.

({
  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");
  },
});

If you're using this event with a component other than ui:menuList, register the event first.

<aura:registerEvent
  name="menuCollapse"
  type="ui:collapse"
  description="The event fired when the menu list collapses."
/>

:::::

:::::tab

:::::

::::::