Usage

This navigation element gives the user a quick way to jump to the relevant section of a long alphabetically-ordered list, eg a contact list. At smaller screen widths, the index becomes a drop down menu.

---

Interaction

The white triangle appears below the currently-selected letter. If the user rolls over another letter, the white triangle appears below that letter too.

---

CSS and media queries

Separate desktop and mobile views are created by using a 767px max-width media query to present a different structure.

The full width menu is hidden in mobile view and a drop down menu containing the list is displayed instead.

---

Use of Javascript

Javascript is used to bind an action to the change event on the drop down menu which redirects users to the page specified using window.location.

---

Component variants

N/a