# Select Menu

One way of taming nav links gone wild is to transform a list of links into a select menu for small screens. This is a clever way to save real estate.

### Pros

- Frees up plenty of space - a select menu definitely takes up a lot less space than a horizontal or vertical list of links
- Keeps interactions in the header - instead of a footer nav, the select menu keeps the navigation functionality in the header, where users are used to seeing web navigation
- Easily Recognizable - a select menu with a clear label saying “navigation” or “menu” is definitely easy for users to figure out.
- Pulls up native controls - each mobile browser will handle select menus their own way. Touch devices will pull up the nav in a touch friendly list, while trackball/d-pad/pearl devices will pull up a select menu more conducive to that particular input method.

### Cons

- Lack of styling control - select menus are a pain in the ass to style. Each browser handles them in their own, usually clunky, way. Forget about cross-browser styling and coming out with anything that looks halfway consistent. As a result, the select menu can stick out like a sore thumb and really dirty up an otherwise good-lookin’ design.
- Potentially confusing – Users are used to select menus in the context of filling out a form, but I’m not sure they’d grasp a form element out of that context. This is simply a hunch, so it would be interesting to test.
- Handling subnav items - nested lists handled by select menus can look weird. Child categories are usually handled by indenting with dashes , and while it might get the point across I see it as potentially confusing and a little ugly.
- Javascript dependency - It doesn’t require too much JS to convert the list to a select menu, but it’s worth pointing out simply because mobile browsers do the dardest things. But again, the technique is pretty cut and dry so there shouldn’t be too many hang ups using this approach.

### Resources

- TinyNav by @viljamis
- Convert a Menu to a Dropdown for Small Screens
- Progressive and Responsive Navigation
- Responsive Menu

### In the Wild

- Viljami Salminen
- Retreats 4 Geeks
- Five Simple Steps
- Performance Marketing Awards