Select Menu Pattern

The select menu pattern solves the problem of needing too much vertical space on small screens, by moving navigation links behind the select drop down. The downside is your links are hidden.

Another potential downside to this pattern is that it requires 2 separate menus be coded and maintained, one as the usual unordered list, and another as a select menu. A variation of this pattern uses jQuery to create the select menu from the unordered list.


Here's the html used to create the header of this page.

<div id="header">
  <div class="container">
  <img class="logo" src="images/logo.png" width="252" height="46" />
  <ul id="demo-nav">
    <li><a href="">Back to Post</a></li>
    <li><a href="top-nav.html">Top-Nav</a></li>
    <li><a href="priority.html">Priority</a></li>
    <li class="current"><a href="select.html">Select Menu</a></li>
    <li><a href="select-js.html">Select Menu JS</a></li>

  <select id="select-menu">
    <option value="" selected="selected">Select</option>
    <option value="">Back to Post</option>
    <option value="top-nav.html">Top-Nav</option>
    <option value="priority.html">Priority</option>
    <option value="select.html">Select Menu</option>
    <option value="select-js.html">Select Menu JS</option>


This pattern can work well when you have quite a few links, but still want to keep vertical space to a minimum on small screens. One plus is it can take advantage of the default styling mobile device's use for select menus without you having to add the styles.