# Collapse Menu

Collapse menus are typically used for navigation to different pages or sections.

A collapse menu contains 3 parts:

1. Title container
2. Arrow icon to collapse and expand the menu (on the right)
3. Menu content

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FoYWE71fc2eAmS0bMxRqM%2Fimage.png?alt=media&#x26;token=ccc2be86-1c39-4b22-97eb-5ce400c04ef7" alt=""><figcaption></figcaption></figure>

You can customize all three parts. For example, in menu content, you can add a [clickable](https://docs.acho.io/app-builder/app-construction/elements/web-elements/clickable "mention") with [text](https://docs.acho.io/app-builder/app-construction/elements/web-elements/text "mention") inside, and set an interaction on the clickable to navigate to a different page.

## Properties

<figure><img src="https://3574406564-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MB_fx7PCUqvFEdrucJC%2Fuploads%2FfUltyvdgg4xoCfXiWxD9%2Fimage.png?alt=media&#x26;token=c5e92be3-80d2-46d4-8b39-8c7982a1fe51" alt=""><figcaption></figcaption></figure>

**Group ID:** If you have multiple collapse menus, group them together by Group ID. To group elements, give them the same ID.

**Single Collapse:** If you have grouped collapsed menus by Group ID, turning on Single Collapse ensures that only one collapse menu will be open at a time.

**Default Expand:** When on, the collapse menu will be expanded by default.

See [tooltip](https://docs.acho.io/app-builder/app-construction/elements/tooltip "mention") for tooltip configurations.

## Supported Events

**Toggle menu:** Triggered when user toggles the menu arrow.

## Supported Actions

**Set Data:** Change element data. See [data-store](https://docs.acho.io/app-builder/app-construction/data-store "mention").

**Set Loading:** Set loading animation. See [set-loading-animations](https://docs.acho.io/app-builder/popular-use-cases/set-loading-animations "mention").

{% hint style="info" %}
Visit [interactions](https://docs.acho.io/app-builder/app-construction/interactions "mention") for more on events and actions.
{% endhint %}