Accordion Containers

Interaction Specs

Interaction Specs: 
1. View collapsed State.

Accordion is collapsed. Left hand arrow indicates closed product section.

2. View expanded State.

On hover the link is highligted. On select the accordian expands. The left hand arrow indicator changes to a downward pointing arrow.

Visual Specs

Visual Specs: 

Pattern Summary

Pattern Summary (Unity): 

Why use this pattern

Accordion menus are generally used in navigation, sliding, minimizing, maximizing content, as well as to get more space and avoid clutter. The user needs to navigate among important main sections while still being able to quickly browse to the subsection titles.

What is the solution

Each headlined section holds a panel. When clicked it can be expanded either vertically to present the subsections. Vertical Accordion menus are the most frequently used and accepted. When one panel is clicked it expands, then other panels collapse.

It is not recommended that Accordion menus be used as a the site's main navigation. Different from Navigation Tabs menu, where items are collapsed when a new panel is clicked, and are most often used horizontally,  Accordion menus are most often used vertically, and function quite well as sub-navigation for a specific section of a website.

When to use this pattern

The primary reason to use an accordion element is to compress a large amount of options into a limited space. Accordions are typically styled as a stack of collapsible panels (and not with the look of hierarchical trees), with the top-level category items used as labels. The category labels may function as full-width handles, or may be provided with a consistent expand/collapse icon. Where Navigation Tabs are used horizontally, Accordion menus should be used vertically.

  • Use when the benefits of a normal sidebar menu are needed, but do not have the space to list all options.
  • Use when there are more than 2 main sections on a website, each with 2 or more subsections.
  • Use when you have less than 10 main sections
  • Use when you have two levels to show in the main navigation.

Do not use this pattern

  • If expanding a section causes a lot of scrolling; avoid having the user scroll and search for the next section to click and open.
  • When it's nested inside another accordion because it's confusing; avoid subdivisions to a panel, it's better to use other patterns like tabs.
  • When it doesn't preserve its state while navigating a web page; it is important to have system persistance on the last state of the panel set by the user.

GUI Kit

GUI Kit contains all Unity Light theme patterns in vector format

Adobe Illustrator Download 2.1 MB
Vector PDF Download 2.7 MB

Updated November 2015