Categories As an Accordion Version this Page
Browse Pattern Set
Return to Top

The Categories As an Accordion pattern displays high-level categories in an accordion pane with lower-level categories and items appearing in a related pane. The category hierarchy should not be deeper than two or three levels.

Pattern Set Decision Table
Return to Top
  Categories/Items Categories/Items
As Table
Categories As
an Accordion
How many levels of hierarchy for categories exist? 3 2 3
What is the maximum number of levels that appear in one view? 3 3 3
Is a description required for categories? Yes Yes No
Do items appear in the first level? Yes Yes Yes
What is the maximum number of categories allowed to appear in one view? 1-2 1-2 3-4
Can you select and act on multiple items? No Yes No
Pattern Samples
Return to Top

Here is an example of categories in an accordion and related categories in a related pane.

Figure 1. Categories in an accordian and related categories in a related pane
Required Screen Elements
Component Type Mandatory Components Customizable or Extendable Components
  • Left pane contains categories and one-level of subcategories.
  • Right pane contains items in the subcategories.
  • Item images can be used above links for visual representation in the right splitter pane.
  • The number of subcategories may be provided alongside the category name [for example, Phones (35)].
  • Use this title format: <Category Name>
    For example: Software
  • Subcategories are listed as links within each category accordion pane except for the selected subcategory. The selected subcategory appears in bold text.
Related Guidelines
Return to Top
Accordion Pane Pane of sections that can be collapsed or expanded to hide or reveal content
Headers Guidelines relating to the use of page headers (as well as subheaders and sub-subheaders)
About Oracle | Legal Notices | Terms of Use | Your Privacy Rights