The a-z nav component allows visitors to quickly check if a list has: an entry/entries, beginning with a letter and scroll to that section.

{{ aspExample({ code: "", nunjucks: "", json: "", title: "", example: "default", id: "65a928932dc70" }) }}

When to use this component

Use the a-z nav component as an on-page sub navigation where large lists of entries organised alphabetically are displayed.

When not to use this component

Do not use the a-z nav component with small lists or lists that contain entries starting with a small selection of characters or lists that are not ordered alphabetically.

How it works

Position the a-z nav component immediately before the list of entries, which may be created dynamically.

Wrap all entries beginning with the same letter in an element, ensuring that the element has a corresponding id attribute. If no entries are found for that letter, a placeholder should be substituted for a link within the a-z nav component.

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Development criteria Status
WCAG 2.2 compliant Not started
WCAG 2.1 compliant Completed
HTML / Nunjucks version Completed
Figma version Not started
M365 versions Not started
Documentation In progress

Make a change to the Design System

Suggest an edit to this system, or any of the components in it, by submitting a Design System change request.