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.


{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}