Designing effective accordion UIs: Best practices for UX and implementation

Editor’s note: This article was updated on 19 November 2024 to offer in-depth insights, actionable design tips, and technical implementation guidance for accordion UIs. Changes include additional best practices for designing accordion UIs, accessibility concerns to address, when to use accordions vs. other collapsible patterns, answers to common questions, and more.

What is an accordion UI and why is it important?

An accordion UI, or accordion menu, is a series of adjacent sections that a user can expand or collapse to reveal or hide content by clicking on the section headers. The general purpose and key benefit of an accordion UI is to reduce cognitive load and ease navigation.

A user is most likely to come across an accordion in a sidebar menu that has child items or on FAQ pages. The primary purpose of accordions in these scenarios is to better organize large amounts of content, making information easier to find.

Users have to click on section headers to reveal content; hence, the primary collapsed state of accordions is less overwhelming and results in a better user experience for users. It also enables users to prioritize which content they want to access, thus allowing them to find their desired relevant information faster.

We can broadly generalize the use of accordions to these two use cases:

• We use accordions when we have a large amount of content that we need to simplify
• We use accordions to simplify the menu and group relevant pages together

That said, they can provide some challenges for your users, which in turn can make them a problem for UX designers. Let’s discuss why.

The UX problem with accordions

Accordion UIs can enrich UX for three main reasons:

• They minimize the need for scrolling
• The section headers act as a form of easily digestible information architecture
• They offer a good alternative to hyperlinks acting as on-page expanded interactions (Hyperlinks can be confusing for users, since they open to a new page)

However, despite these advantages, accordions have several usability issues:

• Too many clickable options — Miller’s Law states that the number of objects an average person can hold in working memory is about seven. If the number of clickable options goes well beyond seven, it can become daunting to users to decide which ones are relevant and require exploration. If there are lots of sections that require expansion, then it is better not to use accordions. In such cases, it is much better to have all the content exposed at once and just let the user gradually scroll. Scrolling is not difficult for the user, and the user’s attention requires less switching
• Potential to increase user frustration — If users have to click multiple times to reach their desired content (or worse, they end up not finding what they’re looking for), they’re likely to abandon their task. Fruitless clicks lead to frustration, and the need to wait for content to appear can also be perceived as time wastage
• Limited discoverability — Hiding content behind a collapsed accordion section makes it less discoverable to users. Users are less likely to discover hidden content, particularly if the click interaction is not enticing enough for the user
• Accessibility issues — For accessibility, accordions have to be programmed for access via keyword or ARIA attributes. However, plain text is accessibility ready and no extra effort is required
• Printability issues — In some cases, accordion content might be desirable print material but accordions are not readily optimized for printing. In such cases, a printer friendly version has to be made available as well

Nielsen Norman Group found that users do scroll long pages, as long as they have relevant content and are organized and formatted properly for easy scanning. The scroll interaction on mouse and trackpads is much easier than performing clicks on targets. The content simply needs to be structured and presented better.

From this, we can gather that the correct usage of accordions to ensure a smooth user experience can be generalized as follows:

• Accordions should be avoided when users need most of the content at once
• Accordions are most suitable when the user needs only a few key pieces of content

Note that on mobile screens, a long scroll can be a negative experience, so an accordion UI may ultimately be more suitable.

Best practices for designing accordion UIs

Even though accordions are quite common, they can still be hard for users to identify and navigate because their styling can vary widely from one application to another. Therefore, to make accordions intuitive for users, we must follow certain best practices and keep the accordion UI relatively recognizable:

• Each section of the accordion must have a clear and concise header. This header is the primary way the user will be informed on what the elaborate section contents might contain
• Make both the icon and the header text clickable. This allows users to interact with either element to open or close the section, making it more user-friendly
• Use a hover effect to show that a section is expandable. For example, change the color of the icon or text when the user hovers over it. Because mobile devices don’t have hover states, this only applies to desktop design:
  
• The content that’s revealed upon clicking the section header should be visually distinct, such that the user understands that it is the revealed content. The content should be directly relevant to the section header, and it should also be placed visually close to the section header as per the proximity rule of user interface design
• The sections throughout the accordion component should follow the same consistent styling. The font, color, background, icons should all be consistent. Therefore, all section headers will follow one singular styling and all revealed content will have one singular styling
• In responsive design, adjust the size of icons and text to fit the screen. For example, use larger icons for mobile apps than for desktop apps to ensure the page looks well-suited for different screen sizes
• For settings menus, add a short subtitle under the title of each accordion section. This helps users quickly understand what the section contains, making navigation easier and more intuitive:
  
• In some cases, like forms, you can add badges to indicate to the user the status of the step, like complete or incomplete. This will give the user a hint about whether they need to open the section or not
• Adding animations when sections open or close can make the interaction smoother and more engaging. It’s not mandatory, but animations can make the design feel more user-friendly than instant opening and closing
• Good accordion design also ensures accessibility for users with disabilities. We ensure this by enabling keyboard navigation or ARIA attributes. Jump to our accessibility section below for more information

If you’re looking for a step-by-step guide to implementing an accordion component in your app, we have tutorials on building a React accordion menu from scratch and building collapsible accordions in React Native over on our developer blog.

How to effectively organize icons and titles for section headers

As mentioned in the best practices listed above, each section of the accordion needs a clear, concise header:

Even though the image above demonstrates section headers with both titles and descriptions, it is completely optional. Section headers can simply be one singular body of text, which is usually a short descriptive sentence or phrase.

You also need a way to show that an accordion section is expandable. The image below demonstrates the various different icons that could be used to signify that it is a clickable section header:

Nielsen Norman Group conducted an elaborate study to identify which icon is the best, and their finding suggests that the caret icon is the most effective in matching user expectations. Although it’s not possible to match every user’s mental model, including the caret symbol communicates to users that the accordion section is expandable and unlikely to direct them to a new page.

The study also included some recommendations for what not to do:

• Don’t use split buttons for accordions, since it can confuse users if text performs one action and the icon performs another. The study found users would tap equally on both places with the expectation of performing the same task
• If you’re using accordions for menu items, they should either open a submenu or go directly to an overview page
• Don’t use a right-aligned icon in cases where opening a menu item directs the user to a new page

Accessibility best practices for accordion UIs

As with every UX design component added to the interface, it is important to ensure it is accessible so all users can use it easily. Here are some tips to make accordion elements more accessible:

• Keyboard navigation needs to be on — Ensure users can navigate easily on the keyboard to open/close sections and move sections up and down with the keyboard. This will enable all keyboard users to navigate easily
• Open/close all sections — In some situations, adding buttons to open and close all sections at once can be very helpful. This saves users from clicking each section individually, making content management easier:
  
• Large clickable area — For mobile design, the clickable area should be large enough to make it easy for users to open and close the information. A size of more than 44px is generally ideal
• Include a focus state — Focus states improve keyboard navigation accessibility. They help users understand when they are in a specific section, allowing them to easily open or close it using the keyboard:
  
• Don’t add accordions inside accordions — Avoid adding accordions within other accordions, as it makes the component harder to use and confuses users
• Add spacing between sections — Provide enough space between sections so users can visualize them and easily open and close them
• Use the ARIA attributes — ARIA (Accessible Rich Internet Applications) attributes are HTML elements that improve accessibility by helping assistive technologies communicate web content more effectively to people with disabilities. An example would be the attribute aria-expanded, which tells the system if the accordion is open or closed:
  

Other ARIA attributes you might need to know are:

• role="region" — Defines the accordion section as a landmark or logical grouping.
• aria-hidden="true/false" — Explains if the content is visible or hidden
• tabindex="0" — Makes sure that accordion controls can be selected and navigated using the keyboard
• aria-controls="ID" — Connects the button to the content it controls

Please note that applying this attribute is more work for developers. However, as a product designer, it is your responsibility to make sure the developers use it.

Here is a short accessibility checklist for your reference:

• Is keyboard navigation available?
• Is the open/close all sections button necessary?
• Does the mobile clickable area work well?
• Did you add a focus state?
• Do users understand when a section is expanded or collapsed?
• Is the spacing between sections good?
• Did the developers add the aria attributes?
• Are the labels/titles easy to understand?
• Does the accordion work on all devices (mobile, laptop, desktop)?
• Does the accordion contain information that needs to be displayed in another place?

Types of accordion menus

In our article so far, we’ve discussed accordions in the context of menus and collapsible on-page content. There are far more varied uses of accordions, such as in forms and filters.

When designing for the various use cases, something important to consider is whether to enable single-active or multiple-active accordion sections. The image below demonstrates the two different accordion states:

For instance, when using accordions in multistep form design, it might be desirable to use single-active accordions so that user focus and attention remains on the task at hand (i.e., the section of the form that the user is filling out). This reduces error and information overload.

The final confirmation screen can summarize all the data at a glance before submission:

However, when designing accordions for filter UIs, it may be desirable to have multiple active sections so that the user can mix and match choices. Putting child items inside parent filter options does reduce the number of options at first glance for the user, as opposed to having a long list of filter items:

The variation in accordion styling can be summarized by the image below. The accordion design can be simple, more obvious and contained in a box, or with some separation to further convey a clickable button style interaction:

We see the separated interaction particularly in single-active accordions to convey that toggling one open will collapse the other because they’re not directly related.

Some designers debate whether to have an accordion open or closed by default. The argument for open by default is to convey to users that it is an accordion and to surface important information.

Keep in mind that important information often does not belong inside an accordion to begin with. Since users are more likely to miss content hiding inside accordions, we should only use accordions where we can afford less discoverability for that content.

Comparing accordion UIs to other collapsible patterns

Accordion menus can be found in different places in interfaces, such as FAQs on websites or support centers, navigation menus (especially on mobile devices), and forms. They help organize a lot of information in a simple way to help users find what they need quickly.

However, it is important to know that they are not fit for every need, and there are alternatives you may want to consider. Let’s take a look at them.

Mega menu

In general, websites with a lot of information, such as large ecommerce websites, use a mega menu instead of an accordion for better organizational purposes. Mega menus make it easier for users to scan information quickly, since it’s all presented in one large menu:

In a mega menu, each of the top categories opens a menu on hover or click. This menu contains categories and sometimes subcategories, organized so the user can navigate the information more easily.

One downside of mega menus is that they don’t work well on mobile, so adaptations are necessary.

Tab-segmented menu

Tab-segmented menus can also replace accordions. This type of menu works well when all the information fits into a small number of tabs. A good example is the Apple sound menu on macOS:

Tabs reduce clicks and make information easier to find. But if there are too many tabs, an accordion is better.

Toggle button

If you want to show or hide information for the user in a simple way, you can also consider using a toggle button. For example, you could use a toggle button to show or hide advanced settings options in a general settings menu. Keep in mind that it is only useful for small amounts of information.

Carousel

Another option is to use a carousel component, which works well for presenting small amounts of information visually. For example, a carousel can be effective in the hero section of a website to quickly communicate key points to the user. However, it is not suitable for detailed or long content.

Not using an accordion

You can avoid using an accordion at all and add the information as it is on the page. But remember that this option forces the user to scroll through the page to find the information.

If you select this option, consider adding side menus so the user can navigate easily. You should also include a search option on the page to make it easier for the user to find the information. You can see an example of it in the Figma help center:

Choosing the appropriate menu UI for your needs

To help you decide what component to select, ask yourself these questions to help you choose:

• Do you want to show the user small, medium, or large amounts of information? A small quantity of content is ideal for toggles, medium for tabs, but larger for accordions
• How many categories do you need to show users? For a small amount, use tabs, but for medium and large amounts, you can use accordions
• What type of information do users need to scan? A mega menu is best for large menus but an accordion is better for FAQs
• Does the information appear on a mobile device? Consider using an accordion in this case
• Where is the information shown on the screen? If it is on the header, the carousel will work better

Apart from these questions, I suggest you add the information in two ways and make a quick prototype to see which solution fits better.

Here is a simple table with all the information you need in one place:

Component	Strengths	Weaknesses	Best used for…
Accordion	Compact, reduces clutter, interactive	Not ideal for quick scans	FAQs, forms, lots of mobile content
Mega menu	Everything visible at once, easy scanning	Not fit for mobile	Large websites with lots of categories
Tabs	Easy navigation	Doesn’t scale well with many items	Small amounts of unrelated content
Carousel	Visual, small chunks of featured content	Content is hidden	Featured items, image galleries

Visual and interaction design for accordion UIs

The visual design of a basic accordion component is quite simple. It includes a title, icon, and text once it opens.

Besides these basics, it may be possible to add other visual elements to the accordion if needed, like notification information or status information. For example, you could add a status indicator to communicate that the user completed or did not complete the information inside.

Let’s break down visual and interaction design for accordion UIs.

Icon & icon position

You can use different icons to clearly show users whether the accordion is open or closed. Here are some examples you can use:

• To open — Plus sign, Chevron down, Chevron to the side
• To close — Chevron up, Close, Minus sign

It’s also possible to make the component without an icon, but this will not communicate effectively to the user that they can open or close it.

You can position the icon before or after the text, but it’s most commonly placed at the end of the section. Positioning the icon before the text can create confusion if another icon is added nearby.

However, placing the icon after the text also has its challenges. Variations in text length can cause the open/close icon to appear misaligned or out of place across different sections. For these reasons, placing the icon at the end is the best choice:

Accordion statuses

Like any component, you can show different states for the accordion to communicate with users. Since this component can open and close, these states apply to both:

• Default — Shows that the component is enabled
• Hover — Shows the user where to click to open or close it. This can be done by changing the title or icon color. You can also add a small animation to the icon
• Pressed — Shows that the section is expanded or collapsed
• Disabled — Shows that the component is not available to use

An advanced accordion status you can enable is Complete/Incomplete — for example, when the user is filling out a form and you want to indicate that a section has been completed (and doesn’t need to be opened again) or still needs to be completed.

Animating the accordion

Accordion components can be made without any animations. However, adding a small animation to the component may add another layer of good UX to the interface.

You can add animation when the component opens or closes, but also for the icon. For example, if you use the plus icon, you can turn it 45 degrees with micro interaction to convert it into a close icon:

Advanced accordion interaction design ideas

There are some advanced interactions you can select for this component to make it more precise for the user’s needs. Here are some examples:

• Title and subtitle — Apart from the title, you can also add a subtitle so the user can better understand what is inside. This is helpful in places with a lot of information, as it provides the user with a little more detail to navigate better
• Step-by-step expansion — This option is useful for forms where the user must complete one step before moving on to the next. Some sections are disabled and will be enabled once the user finishes the previous step:
  
• Auto close — When a user opens a new section, other sections close automatically. This helps users focus on the content. If you want to keep all sections open, users can view multiple sections simultaneously
• Long titles — Write shorter titles, but if that is not possible, add another line. If the title is still too long, use ellipsis, and when the user hovers over the text, a tooltip with all the information will appear

FAQs: Common questions about accordion UIs

We’ve covered a lot of information about designing accordion UIs, but you may have some general questions still. Here are answers to some common questions about accordion components:

• What is an accordion in UI?
  An accordion is a UI component of collapsible sections that can open and close, and it is used to display information to the user in a simple way so they can scan the titles and, if they match what they are looking for, click on them. The most common use is in FAQ sections so users can focus only on the information they are looking for.
• What is the difference between an accordion and a dropdown?
  Dropdown is a component for selecting a value, for example, a country when filling out flight information. It is also used to perform actions like downloading a file from cloud software. Accordion is a component that shows and hides information for the user.
• When should I use an accordion?
  You should use an accordion for large amounts of easily chunked information. Accordions are ideal for organizing information in a way that will be easy for the user to consume and interact with it. Common use cases include FAQ pages, forms with multiple sections, and taking advantage of the limited real estate on mobile devices.
• What is the best icon for an accordion?
  The best accordion icons are simple and familiar. For opening: Plus, Chevron Down, or Chevron to the Side. For closing: Chevron Up, Close, or Minus. These are commonly known and help users easily navigate.
• How do I make an accordion UI responsive?
  It’s just like any other user interface component. You need to adjust the sizes of the sections, the text, and the size of the icons. Be aware also that some interactions like hover do not exist on mobile, and you must test the component on a touch screen to ensure its accessibility.
• What’s the difference between accordion UIs and tabs?
  Tabs and accordions organize information effectively. Tabs are horizontal components that users click to display content from a specific section. Accordions, in contrast, consist of a vertical list of sections that users can expand or collapse to show or hide content. While both organize information, tabs are better suited to smaller amounts of content, whereas accordions are designed to handle larger volumes of information.

Have any questions you don’t see answered here? Ask me in the comments section below!

Conclusion

In this article, we looked at the accordion UI component and covered advanced UX/UI principles to help you implement better accordion UI designs for complex content.

First, we reviewed the accordion component and understood its usage in organizing information.

Our next step was to look at the best practices for using it. For example, adding an icon to communicate better that it is an accordion is a good idea. In addition, each section of the accordion needs a clear and concise heading.

Then we looked at the problems of the accordion and discussed how information hidden in collapsed accordion sections make it less easily accessible to the users. We also reviewed the accessibility guidelines for this component. Apart from basic design tips like sizing on mobile, we explored various ARIA attributes that help convey accordion content more effectively to people with disabilities.

Next, we looked at the different types of accordion UIs and compared accordions to other collapsible patterns. For example, we learned to use a mega menu instead of an accordion component for extensive content. However, if we have a lot of data to organize, an accordion is better than tabs.

In the end, we focused on the interaction of this component, like the enabled and disabled states. We understood that adding the icon at the end of the section is better because it avoids visual issues. In addition, we looked at the option to add animation to the component and some advanced cases like step-by-step expansion for forms.

Featured image source: IconScout