---
schema_version: "1"
id: 419523df4f9f0c40f54cb94389e9913c6c5f72eb7f6948da8f6a30b70b6a9159
title: Expand
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/lightning-base-components/lightning-design-system/guides/aura/components/ui/expand/ui-expand.md
canonical_url: https://developer.salesforce.com/docs/platform/lightning-component-reference/guide/ui-expand.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: 4667595a2da79f81efb555fe5eb990801fd9b20bc69e06edd8d2daa6e55018b7
products:
  - Lightning Component Reference
---
# Expand

**`ui:expand`**

Indicates that a component is expanded.

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

:::::tab

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

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

```xml
<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.

```javascript
({
  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.

```xml
<aura:registerEvent
  name="menuExpand"
  type="ui:expand"
  description="The event fired when the menu list displays."
/>
```


:::::

:::::tab
![No specifications to show](https://developer.salesforce.com/media/no-specs.png)

:::::

::::::