Accordion Menu Edit
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
-
When you hover one of the headlines, the tab folds out at recyclenow.com
-
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.
-
This document is in version 3 and was last updated on Mar 21, 2009 by Anders. Edit this pattern.
Related information
Collection
Related patterns
Accordion Menu has 4 comments
-
almost 2 years ago
JD
5 May 2008
similar web 2.0 graphic design accordion
http://www.stickmanlabs.com/accordion/
http://www.ever-real.com/
-
almost 2 years ago
bingo
6 May 2008
too many menus will be trouble and verbose . sometimes people will boring
-
8 months ago
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. -
25 days ago
Purushottam
20 Feb 2010
good visit for website design ,website development at Low Budget
http://www.imaxinfotech.com