Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.


The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.


Help users to…

Navigate a long list

Also known as: Show more options

Use with caution: Candidate
Allows users to navigate and process a long list of items by progressively displaying additional items as needed.
Peter Russo (VAOS)


When to use this pattern

  • Progressively reveal more options. When you need to focus the user’s attention on the top of a long list of options. Hiding all but the most relevant or top/first options can help the user focus on evaluating a shorter list thereby reducing cognitive load.
  • Most relevant results. This pattern is intended to be used when the first results are expected to be the most relevant. Thus it’s best paired with a default sort, or other tool to show that the results have been personalized.

When not to use this pattern

  • Additional content. Do not use this pattern to disclose additional static content unrelated to the list or when you need to allow the user to show and hide information. If you need to reveal additional information, use the additional information component.


Show more options screen example from the VA Online Scheduling application.
The VA Online Scheduling application uses this pattern for choosing VA facility locations.
Help users to navigate a long list example from the VA Claim Status tool.
The VA Claim Status tools uses this pattern for navigating a long list of older updates to a claim.

How to design and build

Anatomy or layout details

Show more options mock-up screen examples.
The anatomy of the help users to navigate a long list pattern.
  1. Default state. A mobile screen of a page in a form flow. The form question consists of a list with ten total options. 5 options are displayed. A link underneath reads “+ show 5 more options”
  2. Default state - sorter. A dropdown labeled “Sort these options”.
  3. Default state - radio options. Five generic radio buttons.
  4. Default state - show more button or link. Show more button or link exists between the options and the navigation buttons.
  5. State when all options are showing. A mobile screen of a page in a form flow. Same as the first except 10 radio buttons are showing, and the link is not.
  6. State when there are only 5 total options. A mobile screen of a page in a form flow. Same as the first except there is no link or button to show more options.

How this pattern works

  • Given a long list of options, only the first 5 options are displayed.
  • A button or link below the options acts as a trigger for revealing additional options.
    • This button or link does not appear if there are 5 or less options.
  • Clicking the button or link displays more options, 5 at a time.
  • Once all options are displayed, the button or link disappears, or changes label (“Hide options”).
  • Once the additional options are revealed, there may be no need, and thus no mechanism, to hide them.

Components used in this pattern

Page templates available for this pattern

  • This pattern exists in VA Online Scheduling (VAOS) on the facility and provider sections of the “Start scheduling” flow.
  • This pattern also exists in the VA Claim Status tool.

Content considerations

The text of the trigger link should be in the following format:

”+ show [#] more [name of option]”

For example, “+ 5 more locations”

Accessibility considerations

  • Use aria-controls and aria-expanded attributes to convey the expand functionality to assistive technologies.
  • The link element that acts as the trigger to reveal more options has a role of heading so it can be found in the page. Setting an aria-level is recommended.
Edit this page in GitHub (Permissions required)
Last updated: Aug 26, 2022