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: "<nav class=\"asp-a-z\">
<ul class=\"asp-a-z__list\">
<li><a href=\"#\">a</a></li>
<li><a href=\"#\">b</a></li>
<li><a href=\"#\">c</a></li>
<li class=\"asp-a-z__placeholder\">d</li>
<li class=\"asp-a-z__placeholder\">e</li>
<li class=\"asp-a-z__placeholder\">f</li>
<li><a href=\"#\">g</a></li>
<li><a href=\"#\">h</a></li>
<li><a href=\"#\">i</a></li>
<li><a href=\"#\">j</a></li>
<li><a href=\"#\">k</a></li>
<li><a href=\"#\">l</a></li>
<li><a href=\"#\">m</a></li>
<li><a href=\"#\">n</a></li>
<li><a href=\"#\">o</a></li>
<li><a href=\"#\">p</a></li>
<li><a href=\"#\">q</a></li>
<li><a href=\"#\">r</a></li>
<li><a href=\"#\">s</a></li>
<li><a href=\"#\">t</a></li>
<li><a href=\"#\">u</a></li>
<li><a href=\"#\">v</a></li>
<li><a href=\"#\">w</a></li>
<li><a href=\"#\">x</a></li>
<li><a href=\"#\">y</a></li>
<li><a href=\"#\">z</a></li>
</ul>
</nav>", nunjucks: "{{ aspAZ({
rows: [
{
title: \"Dave\",
content: {
html: '<p>Dave, Content (html) about Dave</p>'
}
},
{
title: \"Chris\",
content: {
html: '<p>Chris, Content (html) about Chris</p>'
}
},
{
title: \"Claire\",
content: {
html: '<p>Claire, Content (html) about Claire</p>'
}
},
{
title: \"Pete\",
content: {
text: \"Pete, Content (text) about Pete\"
}
}
]
}) }}", title: "", id: "65a928932dc70", url: "" }) }}
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>'}
]
}
]
}) }}