Axure Tutorial: Dropdown Menu Interaction and Motion Effects


Although there are menu items in the basic widget library of Axure, we don't necessarily like the style and interaction, so we make dropdown menu items here to meet different needs.

Features to be Realized

Dropdown menus

When clicking the menu header, show / hide the sub-menus and rotate the arrow and push the lower element.

How to Realize these Features

Through the shown / hidden of dynamic panel and the rotation of arrow.

Preview the completed prototype for this tutorial

Widgets Setup 

Widgets setup

Make a header menu, 3 items and an arrow. Group header menu and arrow, Create three items as dynamic panels.

Interactions Setup


When the title is clicked, judge whether the panel is visible. If visible, hide the panel, push the widgets below, rotate the angle of the arrow by 180, and set animation; if it is not visible, show the panel, push the widgets below, and rotate the angle of the arrow by 180.

Select all the widgets and copy them below.

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).

Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design. 

Leave a comment

Please note, comments must be approved before they are published

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

This section doesn’t currently include any content. Add content to this section using the sidebar.