Problem summary

User needs to navigate among a website's main sections while still being able to quickly browse to the subsection of another.

Example

When you hover one of the headlines, the tab folds out at recyclenow.com

Usage

• Use when you want the benefits of a normal sidebar menu, 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 only have two levels to show in the main navigation.

Solution

• Each headline / section has a panel, which upon clicking can be expanded either vertically or horizontally into showing its subsections. Vertical Accordion menus are the most frequently used.
• The transition from showing no options of a headline to showing a headline’s list of options can be done either with a page refresh or with a javascript DHTML animation.
• When one panel is clicked it is expanded, while other panels are collapsed.

Rationale

Accordion menus are often used as a website’s main navigation. In this way, it acts much like Navigation Tabs, as menu items are collapsed when a new panel is clicked. Where the Navigation Tabs are most often used horizontally, Accordion menus are most often used vertically.

Accordion menus can however also function quite well as sub-navigation for a specific section of a website.

More example images of the 'Accordion Menu' pattern

• 

  At the developer part of adobe.com, the whole page is build up as an accordion menu

• 

  The portfolio content of Jason Reeds site is browsed via an Accordion menu.

• 

• 

  From canon.com.

View more example screenshots

5 Comments

• 1
  

  JD

  5 May, 2008

  similar web 2.0 graphic design accordion

  http://www.stickmanlabs.com/accordion/

  http://www.ever-real.com/

• 2
  

  bingo

  6 May, 2008

  too many menus will be trouble and verbose . sometimes people will boring

• 3
  

  dvir

  21 Jul, 2009

  when browsing onoe piece, and then the user wants to go to another, she needs to browse the other section titles on both endings of the accordion (above and under for vertical, and to the left and to the right for the horizontal)
  this problem makes the accordion not suitable for case when the user needs to browse the menu frequently.

• 4
  

  Purushottam

  20 Feb, 2010

  good visit for website design ,website development at Low Budget
  http://www.imaxinfotech.com

• 5
  

  Gil Barros

  6 Jan, 2011

  A working demo of the accordion pattern (but not on a menu) can be seen at: http://jqueryui.com/demos/accordion/

Post a comment