Alphadex An alphabet-based navigation pattern.
An alphadex is used to navigate alphabetically within a page. It is comprised of single character (e.g. A, B, C) buttons that link to a corresponding alphabetized section.
Table of contents
Usage guidelines
When to use
- An alphadex is used to alphabetically filter through long lists of many items. If the items are sorted alphabetically, including an alphadex at the top of the list will help with discovery and organization.
Variations
Range
When space is limited, or when the data being navigated with the alphadex is unevenly distributed, consider using the range variation. This variation groups multiple characters into each button.
Mobile
At the smallest breakpoints, use the mobile variation of the alphadex, which is a select menu with letters for each section. Only show letters in this version of the alphadex if they have corresponding sections. Use the mobile attribute to render the mobile alphadex and the letters attribute to manually set the letters to those with corresponding sections.
Attributes
An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.
<res-component booleanAttribute stringAttribute="parameter">
<child-element></child-element>
</res-component>| Attribute | Type | Description |
|---|---|---|
letters | string | String of letters and characters to add to index (defaults to full alphabet) |
active | string | Active letter or character |
range | boolean | Use a range of letters instead of individual letters (always 0-1, A-Z) |
mobile | boolean | Switches to small screen dropdown |
API
| Name | Type | Data | Description |
|---|---|---|---|
letters | property | string | Get/set available letters |
active | property | string | Get/set active character |
range | property | boolean | Get/set range style |
mobile | property | boolean | Get/set mobile style |
Events
| Event | Detail | Returns |
|---|---|---|
change | detail.letter | Newly active letter |
Notes
Depends on:History
| Version | Note |
|---|---|
| 0.21.0 | Add 1 pixel to width of range alphadex cells to prevent stacking |
| 0.12.0 | Apply new spacing scale. |
| 0.11.0 | Update event from alphadex:change to change |
| 0.10.0 | Color update |
| 0.7.0 | Initial build to spec. |