Accordion menus are used for showing and hiding HTML elements. Typically with this style of menu, clicking on a horizontal title bar will toggle between expanded and contracted content, permitting users to choose which sections of a page they wish to look at in-depth at any given time. Because an accordion menu is designed to close onclick, it is a tool that is especially useful for showing and hiding a large number of list items that might otherwise get in the way of the main content of a page.

Why use an accordion menu?

The primary reason to incorporate accordion menus into your design projects is simply that they are great for user experience. This is because they permit users to retain full control over exactly which content they look at, and when; quickly folding the menu up again once they have finished viewing each section of interest.

Furthermore, collapsing the content in an accordion limits the amount of scrolling users have to do. This makes accordion menus particularly appropriate for use on devices with smaller screens. Meaning that they are a strong favorite for mobile apps. Wikipedia for mobile is a prime example of a platform that very successfully implements accordion content for greater usability on small screens.

**When not to use an accordion menu?**

As useful as accordion menus are, some studies have shown that, because they necessarily require a degree of interaction from the user, using expanding menus of this kind on desktop can actually be counterproductive. This is especially true when there are a lot of sections that the reader might wish to look at - simply because each one will require another click in order to expand the dropdown content. After a while this can become tedious for users, especially if they want to read the entire page.

In such cases, interesting and well-presented content shown all at once will generally have a much lower bounce rate than a situation where repeated clicks are necessary in order to view all relevant content.

However, while this may be the case for desktop users, expandable content is nearly always preferable on mobile devices due to the inherently limited amount of screen space available.

Finally, some accordion menus have multiple levels, with submenus that can also be clicked to expand further content. While in some cases multilevel menus of this kind can certainly be a good solution, keep in mind that they introduce a much higher degree of complexity to a page. Consequently, depending on the exact layout and design, users may become confused and lose their way among a maze of expanding content.

How to create accordion menus in Framer

In Framer, you can use Magic Motion to create an accordion menu interaction. Magic Motion is a transition type that can animate layers from one state to another. Just navigate from one layer to the next and Framer will figure out the rest.

First, create two screens. These will be for the state of the open menu and the closed menu. Then, use a frame to design the state of your closed menu.

Make sure to include an icon that indicates that the menu will open content downwards. You can use the Icon Set Default Component and choose chevrondown. Then in the next frame, design the state of your open accordion menu. You can use the chevronup icon to indicate the menu is open. Then just create a few list items.

Finally, set the transition between the two frames to Magic Motion and your accordion menu is all set to go!

Resources

Talk about this on Discord