Accordion Menu Design pattern

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


  • 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.


  • 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.


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, the whole page is build up as an accordion menu


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

  • AccordionMenu

  • AccordionMenu



Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 130 votes, 73.85% like this one.

Example images

  • AccordionMenu
  • AccordionMenu
  • AccordionMenu
  • dribbble_menu
  • Plan
  • 29
  • Ninefold