If you have a number of options in a select dropdown, it can be burdensome and push the options off the viewport. You can, however, add scroll options to allow users the intuitive ability to see more options.
From a usability perspective, it's recommended that the dropdown menu item numbers should not be more than seven items. A higher number of items will make finding and selecting the desired menu item difficult. However, there are times when you have no choice but to use a lot of menu selection items in dropdown menus for example, when you need to display different countries or languages for people to select. In those cases, using a scroll function in the dropdown menu is needed. In this tutorial, we'll show you how to build a scrollable dropdown menu.
In this tutorial, we'll be using the Slick Slider by Ken Wheeler for the scrolling functionality and FontAwesome for the dropdown arrow icons. Before we get to building the HTML structure for the dropdown menu, we first need to add all the necessary external files in the head section of your HTML file:
The HTML is pretty straightforward with a div element containing all the dropdown list items inside an a tag. The important elements to pay attention here is the
.up and down classnames next to the
Once we build the HTML structure of the dropdown menu, we have add some CSS rules to adjust the height of the dropdown menu, control the overflow and position the up and down arrows as well as adding the right padding and margins. Feel free to change the text and background colors as you wish in your project:
After that, we use the standard Slick Slider code and adjust it vertically so that the slider items or the list items appear in vertical order rather than a horizontal order. In the
nextArrow options, the arrow links that make the dropdown menu slide up and down are targeted along with their classnames,
.down, respectively. Feel free to customize the number of slides to show depending on the number of your list items:
And there is is. Check out the JSFiddle below to see how the dropdown menu functions before committing to its use: