Framer
Framer
  • Why Framer
  • Teams
  • Learn
    • Tutorials
    • Examples
    • Templates
    • Sessions
    • Speedruns
  • Pricing
  • Blog
  • Updates
  • Support

Smart Components

Social App
Music Player
To Do App

Magic Motion

Photo View
Animated Tabs
Card List
Card Paging
Menu Transition
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Window
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Accordion Menu

Open in Framer to interactPreview this example

Use an accordion menu to expand and collapse a list of items.

Open in FramerPreview Example

Learn all about accordion menus

What is an accordion dropdown menu?

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

Framer

  • Why Framer
  • Teams
  • Pricing
  • Blog
  • Updates
  • Motion

Platforms

  • Web
  • macOSbeta
  • WindowsBeta
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing

Learn

  • Tutorials
  • Examples
  • Templatesnew
  • Sessions
  • Speedruns

Resources

  • Packages
  • API
  • State of Prototyping
  • Desktop Prototyping
  • Prototyping Tool
  • Mockup Tool
  • Wireframing Tool
  • UI/UX Design Tool
  • Graphic Design Tool
  • User Testing

About

  • Loupe
  • Community
  • Company
  • Careers
  • Legal
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement