Published on 05 January 2026 under the Web category.

Artemis, the calm web reader I maintain, has an Authors page that lists all of the websites to which you are subscribed. The list is presented in alphabetical order, with a heading for each letter in the alphabet to aid in navigation. There is a search feature, too.

I follow a lot of blogs, which means that the list is long. It’s hard to find a particular entry without typing and using the search feature. I wondered: are there another methods of navigation that would be useful? I then started to think about the A-Z navigation component in the iOS Contacts app, which shows a sidebar with all the letters from A-Z. You can tap on a letter or scroll through the letters to get to a specific part of the contact list.

I decided to make a web component of this feature, which is available in my playground. I called the component <contact-bar>. Feel free to use, copy, and remix, this component.

After building the component, I added it to the aforementioned Authors page in Artemis with custom styling. The component looks like this:

ALT

A list of websites I follow, with a sticky list of letters in the right navigation.

With this component, users can tap on a letter to navigate to that subheading on the page. The component sticks with the user as they scroll, so it is constantly visible. Note: Only letters A-T are presented as the above screenshot was taken with the mobile preview option in developer tools at a smaller resolution. The full A-Z list is presented on my iPhone in testing. Although, it is likely I will need to make changes to the component so that it works with smaller screens.

To make this component work, each letter heading – A, B, C, etc. – has a HTML id equal to the capital letter for that letter. This allows #A to be used to link to the heading for the letter A, and so on. Then, the web component creates a list of all letters from A-Z, as well as including any additionally specified characters (i.e. @).

With that said, not all letters between A-Z may have a corresponding heading – a user may only have subscribed to a dozen or so feeds, whose first letters collectively do not cover each heading from A-Z. To make the UI consistent, predictable, and thus more intuitive, the letters from A to Z are always listed. But, if a corresponding heading is not on the page, the letter links to the closest letter.

Suppose I subscribe to “Adam’s Blog” and “Carly’s Blog” but no blog whose name starts with B. The letter B would link to its closest existing heading that precedes it. In this case, that would be the A heading. If “Carly’s Blog” was the last blog in the list, every other letter would link to C. If there was also a “Thomas’ Blog”, the letters closest to C in alphabetical order would link to C, and the letters closest to T would link to T. Thus, G would link to C, and O would link to T, since G is closer to C than T and O is closer to T than C. The source code for this is in the web component code.

In implementing this web component, I wonder if I could achieve a similar “scrolling” effect as the iOS Contact app, where you can scroll within the A-Z list to quickly navigate the page. I spent an hour or two working on this and had something that sort-of-worked in Firefox developer tools’ mobile view if I recall, but the touchmove event on which my implementation depends – which emits an event when a touch moves on the screen, such as a finger moving up and down while pressing the screen – is not supported in iOS Safari.

With that said, I found that having the A-Z hyperlinks was a good-enough solution. Being able to tap on a letter between A-Z that is constantly visible on the screen vastly improves the speed with which I can go through the list of authors to which I am subscribed in Artemis – a list that most likely contains over a hundred entries now.

If you see opportunities for improving the web component, do let me know!