Skip to content

Progressive disclosure

These guidelines summarize how GitHub implements progressive disclosure—an interaction design pattern that hides/shows information—as well as guiding principles, best practices, and implementation support.

Guiding principles

Maintain context for users

When designing interfaces that incorporate progressive disclosure, refrain from creating interactions that drastically disorient the user’s initial point of focus.

Progressive disclosure vs navigation

It's important to understand the difference between progressive disclosure and navigation patterns. Because the two share common elements, it can be confusing when deciding which type to implement.

Please refer to these guidelines as they detail in-use solutions, and outline best practices for implementation. If you need more help, refer to the support section of this article for how to get in touch.

Pair icons with text when possible

Pair progressive disclosure icons with descriptive text to provide context.

Implement only as necessary

Progressive disclosure should be used sparingly, when it’s necessary to truncate information for the general layout/design.

Progressive disclosure UI patterns

The following table outlines common progressive disclosure solutions in use at GitHub.

ComponentIconUsageNotes
Chevron iconchevronWhen elements of content are collapsed and can be toggled openDo not use this icon to trigger a dropdown menus or navigation; the caret icon is the more suitable for this.
Fold/Unfold iconexpandSignify that there is content (typically text) to be revealedShould generally stand alone, rather than being paired with text
Ellipsis iconellipsisFor toggling truncated inline text contentDo not use this icon to trigger a dropdown menus or navigation; the Kebab icon is the more suitable for this.
Text-only togglesUsage of this solution is discouraged, as generally icons or icon+text pairings provide better accessibility and more information
KebabkebabN/AFor toggling inline dropdowns and menus
CaretcaretN/ARefrain from using this icon as a progressive disclosure solution

Chevron icon

The chevron icon is used when elements of content are collapsed and can be toggled open. Typically this icon is positioned vertically, and alternates between “up” and “down” states. This icon is quite flexible, and can stand alone, or be paired with text.

Chevron icon used to display more branches in mobile view

Do: utilize appropriate text in scenarios to provide clarity
Don't: use the chevron to trigger dropdowns

Caution:

  • The chevron should not be used as a call-to-action for drop down menus
  • It should not be used for pagination, or indicate directional actions

Fold/Unfold

This icon is used to signify that there is content that can be toggled open and closed. It is typically surrounded by text content above and below it. There are currently versions of this icon that expand the context in a singular direction, but are only used in GitHub’s code review editor.

Fold/Unfold Icon used in Profiles context

Do: Use this icon to show content expansion in the code editor
Don't: pair this icon with lengthy text

Caution:

  • This icon should generally be used to signify the expansion of text content
  • Generally this icon is not displayed with accompanying text

Ellipsis icon

The ellipsis icon is used for toggling truncated inline text content. Its primary purpose is to serve as a method that designers to use to curtail bodies of texts, but sometimes other types of information.

Do: use this icon to give users the option to toggle the amount of text being displayed
Don't: substitute a Kebab icon in the place of an ellipsis

Caution:

  • While visually similar, the ellipsis icon is different from the kebab icon, which is used for dropdown menus or general call-to-actions. Be careful not to confuse them for one another
  • This icon generally stands alone within inline bodies of text

Support

Iterate and componentize

If or when certain progressive disclosure patterns emerge in your design, or you believe a certain solution should be made into a component, reach out to the #design-systems channel on Slack to discuss how you can submit your code or idea. You may also reach out by opening an issue to the Design Systems team directly on GitHub.

Requesting feedback

Progressive disclosure can be tricky to implement, and certain designs and scenarios may test the bounds of our design guidelines. If you have further questions or need clarity on implementation, please get in touch via the #design-systems channel on Slack.

Edit this page on GitHub
3 contributorsyailifemmebotashygee
Last edited by yaili on April 2, 2020