Shortcut Dropdown

An easy way to let your users navigate to important pages on your website is using a Shortcut dropdown box. The concept is really simple: a dropdown box (<select> box) lists a series of locations on your website. Once the user changes the value of the – that is when the user chooses a location – the browser window changes location to the page selected.

The box can be done in two ways: one where the user is redirected as soon as he or she has selected a value and one where the user must press a submit button to go to the page requested. We will start with the latter first.

Our dropdown box will look like this:

The HTML behind the dropdown box is:

<select id="shortcut_dropdown">
  <option value="/patterns">Patterns</option>
  <option value="/techniques">Techniques</option>
  <option value="/docs/pages/About">About UI-patterns.com</option>
</select>

This box in itself will not do much, so let’s add a submit button and some complimentary javascript to get it to work:

<select id="shortcut_dropdown">
  <option value="/patterns">Patterns</option>
  <option value="/techniques">Techniques</option>
  <option value="/docs/pages/About">About UI-patterns.com</option>
</select>
<input type="button" value="Go!" onclick="location.href = document.getElementById('shortcut_dropdown').value;" />

This HTML will render as:

Setting the value of location.href in javascript translates to changing the currently viewed page in the browser: that is to redirect to a new page.

If we want to skip the submit button, we can also just set the location.href when the value of the select box itself is changed:

The HTML behind this is:

<select onchange="location.href = this.value;">
  <option value="/patterns">Patterns</option>
  <option value="/techniques">Techniques</option>
  <option value="/docs/pages/About">About UI-patterns.com</option>
</select>

That’s it… very very simple.

This document was last updated at February 02, 2008

Shahar 07 Feb 13:09

I’d have hoped that the site would do more to promote good usability practice, not just document common techniques.

Dropdowns for navigation is #1 poor usability design. Getting rid of the ‘Go!’ button is #2.

A reference for Good techniques and practices would be very useful. A library that doesn’t discriminate between good and bad practice will just compound the interface problems that already exist.

(apart from that that, this is a very nicely put together site and if the content is chosen carefully would be a great resource)

Janko 26 Mar 11:39

I agree with Sharar. This technique shouldn’t be used. It is in contrast with good UI design best practices.

Shortcut Dropdown

2 comments

Post a comment