A need recently arose (in a website I was updating for a client) to display a long list of links, about 60 in total to start. A normal drop-down menu or sidebar block menu wasn’t suitable to use. The list of links needed to be fast for users to access on any device and fully compliant with WAI guidelines for accessibility.
I opted to go the route of an HTML select menu. Normally these are only suitable to use inside forms, but with a tiny bit of Javascript it is possible to repurpose them as a very effective website navigation component.
SelectNav is available to download from the Stacks4Stacks website. It is a good solution for presenting a long list of webpage or file download links. Items within the select menu can be dragged into any order and it’s possible to sub-categorise them too with ‘option groups’. A simple yet very effective stack.
The button to trigger the option select menu carries a couple of style and colour settings. As normal, the styling of the option select menu itself is the responsibility of the browser or operating system.
The SelectNav stack is provided as a free download. But as always, if you get any use from the stack a small donation is very much appreciated and ensures we can continue to offer you support and updates going forward.