An accordion UI is a design element that consists of a vertically stacked list of components that can be expanded or collapsed. A UX accordion, when triggered by an interaction, accordions UX allows users to see or hide the associated content as desired.
This is the most basic type of accordion, consisting of a single panel that can be expanded or collapsed. A single UX accordion is usually used for additional information under the form of “Learn More”.
Stacked accordions are a collection of multiple single accordions stacked together. Each accordion works individually, and users can choose which accordion to open. Stacked accordions won’t reveal all accordions, just the ones selected.
Hierarchical accordions are another accordion style that has the meaning to create a less overwhelming UX/UI design and a more intuitive design. Hierarchical accordions are stacked accordions with other sublayers. Users can expand or collapse both main panels and sub-panels. This is used for displaying structured information with multiple levels – such as categories and subcategories.
An accordion menu UI is often found in website navigation. It displays a list of categories or menu items, and when clicked or tapped, the menu item expands to reveal sub-items or related content.
The default states of an accordion are:
Accordion headers serve as the clickable titles or labels that users interact with to expand or collapse accordion sections. These titles are short phrases describing the content within the corresponding section, giving the user an idea of what they will find out when clicking on the accordion design.
Icons indicate the nature of accordion sections. It serves as a visual cue that prompts users to click on the header to reveal or hide the associated content. These are usually to the right or the left of the headers and are oriented in a way that aligns with the direction of expansion.
When creating an accordion, use the following icon sets:
Panels refer to the content areas within an accordion that expands and collapses when interacting with the headers. This represents the hidden information or content that is revealed when we click on the corresponding accordion header.
Panels can contain various types of content – such as text, images, forms, or embedded multimedia elements. The content within the panels provides additional information or options related to the header, helping users access relevant details without overwhelming the interface.
Use an accordion component on content-heavy websites, also known as website accordion, where the content is lengthy but not all of it is essential for all users. For example, FAQ pages use accordion UX design components and let users scan through the list of questions and choose the ones they are most interested in.
Accordions UX are used in mobile devices due to the limited space available. Accordion UX design elements provide an overview of the content rather than making them scroll endlessly.
Use accordion design when sequentially presenting information to break down each step. This is used on onboarding processes, completing forms, etc.
Accordions are used when filtering information without going through all the other filters. They serve as structural components that allow users to expand only the desired sections without dealing with other unnecessary filters.
Our uinkits system is a Figma Design System and UI Kits that include UI components that allow you, as a UI UX designer, to create your design products as quickly as pressing a button. You can find all types of accordions and everything you need to create the perfect product design in Figma – all in just a few clicks. All you have to do is take the UI design component you need, and you’re ready to use it in your designs!
So, get your uinkits package and start designing now!
Upgrade to UI PRO version of Uinkits Systems to unlock 23.000 UI components.
Use the code "HNY25"
