Navigation / The visual dictionary
Accordion navigation.
A navigation list whose sections expand to reveal child destinations.
Also calledcollapsible navexpandable navigation
01
UI illustrationSee it in context
02
What it is
A navigation list whose sections expand to reveal child destinations. Make expanded state clear and keep the parent label distinct from its expand affordance when both act differently.
When to use it
Use it to organize longer side navigation into understandable groups.
Know the difference
Accordion navigation reveals destinations; a content accordion reveals information in place.
03
Across platforms
WebiOSiPadOSAndroidmacOSWindowsLinux
Web · iOS · iPadOS · Android · macOS · Windows · Linux
Web implementations should expose expanded state; phone side menus often use the same pattern in a drawer.
04
Go to the source
Primary documentation for the pattern and its platform conventions.