The Navigation List supports way-finding at section level, giving users a scannable overview of what belongs in a particular part of the site hierarchy before they commit to exploring further. The component helps users understand the site's information architecture by surfacing the children of a given section and, optionally, a brief description of the parent page.
Do's
- use short, distinct labels that accurately represent the destination page or section
- add a description when the title alone does not make clear the destination page's purpose
- ensure each listed item reflects a stable part of the site architecture
- if using supporting illustrations or icons, ensure each icon reflects the content
Don'ts
- do not use Title on its own when not displaying the child pages, as adding a description gives context for users to act on
- do not use it as a substitute for standard list components when the content has no navigational or architectural relationship
When to use
- use on navigation pages, within sections where exposing the child pages helps orientation and navigation
- use when you wish to communicate clearly the page's role within the broader site hierarchy, such as on landing pages or section homepages
When not to use
- do not use when you wish to display content that is a standard list of items with no structural relationship to site architecture. Instead, consider using the Lists component
- do not use for teasers or shallow, temporary information such as news, events, or campaign content. Instead, consider the Content Item or Cards component