Accordion Menu

Learn all about accordion menus

What is an accordion dropdown menu?

HTML accordion menus are used for showing and hiding HTML elements.(There are also Javascript accordion menus and CSS accordion menus, depending on what programming language your app or website is using.)

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.

Normally, on desktop, pages with long menus would require extensive scrolling through each element to get where you want. That can be time-consuming, and time spent scrolling is precious seconds where your user can get bored of your content and click away.

To that end, accordion menus compress otherwise-long menu options into shorter, more compact menu features that are interactive and allow the user to select whatever menu options they’d like to access. Click the option, and the information they want expands piecemeal without affecting the rest of the page or app.

Mobile Accordion Menu

Furthermore, collapsible menu 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.

Vertical accordion menus are a major option for web designers, especially on mobile, where the vertical expansion of sub menu items flows nicely with the portrait mode of a phone. (In fact, it’s a bit rarer to find horizontal accordion menus, but when you do it tends to be part of larger, more desktop-focused sites with more image-focused interfaces.)

Wikipedia for Mobile is a prime example of a platform that very successfully implements accordion content for greater usability on small screens. Their accordion design pattern is incredibly intuitive; the ‘Quick Facts’ section, for instance, expands into easily readable information on the subject. Look up an actor, for instance, and their “Personal life,” “Career” and “Filmography” sections will often be in the form of an accordion menu.

When not to use an accordion menu?

Not all app elements are created equal -- more than anything, web and app design is all about curating the kinds of navigation patterns you want to cultivate for your user. You want your UX to be invisible, an experience that goes so smoothly that the user barely recognizes that they’re being guided along the app by user design.

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 a 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 multi level 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 drop down 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!