One popular navigation design pattern for the responsive web is collapsing your website's navigation into a select menu. However, representing hierarchy or categorical distinctions in select elements often leads to butchered HTML with manual hyphens and lots of spaces. In this tutorial we'll introduce you to a somehwat obscure HTML tag called optgroup which will provide you with an easy (and semantic) way of grouping related content in select menus.
Introduction
Figuring out how to optimally fit website navigation into the small screen real estate of mobile devices is an ongoing challenge of responsive web design. There are various responsive web design navigation patterns that work quite well. One of the more popular methods is condensing website navigation into a form select element.
This technique has been covered and explained in various tutorials across the web, including in an article on Webdesigntuts+ by Ian Yates: Building a Responsive Layout with Skeleton. However, converting site navigation into a native form control is not without controversy. Some argue it's a bad idea, as form elements were simply not meant for navigation.
select: A Quick Overview
The select element is great a UI element because it can hide many options under a single control, thus saving lots of screen real estate (an attractive proposition on mobile devices). It also allows designers to keep the site navigation at the top of the page, where users are accustomed to finding it.
In addition, there is one interaction benefit select menus provide that other HTML elements simply cannot: native controls. When active, select menus give users access to native controls that provide possibly the most favorable interaction, independent of the user's device or input method.
Deciding whether or not to convert your navigation into a select at mobile sizes is ultimately up to you as the designer. Every case is different. If you do decide to go down this route, this tutorial will provide more information on how to optimally group your navigable links using the optgroup HTML tag.
Example: Webdesigntuts+
We're going to use Webdesigntuts+ as a simple example of how to theoretically use the optgroup tag.
Note: This example is in no way a suggestion of how to properly solve a navigation design problem for Webdesigntuts+ or any site. It is merely a quick illustration of how one could use the optgroup element.
Let's say we wanted to condense the three separate navigation elements on the Webdesigntuts+ homepage into a select element.
Without optgroup
Converting navigable links into a select element while maintaining categorical grouping can prove to be messy if not done correctly. Some designers/developers might create a giant select menu using manual spaces ( ) and hyphens as separators:
1 |
<select>
|
2 |
<option value="Without Optgroup">Nav Without <optgroup></option> |
3 |
|
4 |
<option value="Browse Webdesign Tuts+">Browse Webdesign Tuts+</option> |
5 |
<option value="Home"> - Home</option> |
6 |
<option value="Home"> - Tutorials</option> |
7 |
<option value="Articles"> - Articles</option> |
8 |
<option value="Tips"> - Tips</option> |
9 |
<option value="Sessions"> - Sessions</option> |
10 |
<option value="Videos"> - Videos</option> |
11 |
<option value="Premium"> - Premium</option> |
12 |
|
13 |
<option value="About Webdesign Tuts+">About Webdesign Tuts+</option> |
14 |
<option value="Advertise"> - Advertise</option> |
15 |
<option value="Write For Us"> - Write For Us</option> |
16 |
<option value="About"> - About</option> |
17 |
<option value="Usage"> - Usage</option> |
18 |
|
19 |
<option value="Tuts+ Network">Tuts+ Network</option> |
20 |
<option value="Tuts+ Hub"> - Tuts+ Hub</option> |
21 |
<option value="Psdtuts+"> - Psdtuts+</option> |
22 |
<option value="Nettuts+"> - Nettuts+</option> |
23 |
<option value="VectorTuts+"> - VectorTuts+</option> |
24 |
<option value="Audiotuts+"> - Audiotuts+</option> |
25 |
<option value="Aetuts+"> - Aetuts+</option> |
26 |
<option value="Cgtuts+"> - Cgtuts+</option> |
27 |
<option value="Phototuts+"> - Phototuts+</option> |
28 |
<option value="Mobiletuts+"> - Mobiletuts+</option> |
29 |
<option value="Webdesigntuts+"> - Webdesigntuts+</option> |
30 |
<option value="Wptuts+"> - Wptuts+</option> |
31 |
<option value="Mactuts+"> - Mactuts+</option> |
32 |
<option value="Gamedevtuts+"> - Gamedevtuts+</option> |
33 |
<option value="Crafttuts+"> - Crafttuts+</option> |
34 |
</select>
|
With optgroup
However, using the optgroup element will provide you with cleaner HTML and built-in support for categorization in a select list. We use the label attribute to determine what will be displayed:
1 |
<select>
|
2 |
<option value="With Optgroup">Nav With &lt;optgroup></option> |
3 |
|
4 |
<optgroup label="Browse Webdesign Tuts+"> |
5 |
<option value="Home">Home</option> |
6 |
<option value="Home">Tutorials</option> |
7 |
<option value="Articles">Articles</option> |
8 |
<option value="Tips">Tips</option> |
9 |
<option value="Sessions">Sessions</option> |
10 |
<option value="Videos">Videos</option> |
11 |
<option value="Premium">Premium</option> |
12 |
</optgroup>
|
13 |
|
14 |
<optgroup label="About Webdesign Tuts+"> |
15 |
<option value="Advertise">Advertise</option> |
16 |
<option value="Write For Us">Write For Us</option> |
17 |
<option value="About">About</option> |
18 |
<option value="Usage">Usage</option> |
19 |
</optgroup>
|
20 |
|
21 |
<optgroup label="Tuts+ Network"> |
22 |
<option value="Tuts+ Hub">Tuts+ Hub</option> |
23 |
<option value="Psdtuts+">Psdtuts+</option> |
24 |
<option value="Nettuts+">Nettuts+</option> |
25 |
<option value="VectorTuts+">VectorTuts+</option> |
26 |
<option value="Audiotuts+">Audiotuts+</option> |
27 |
<option value="Aetuts+">Aetuts+</option> |
28 |
<option value="Cgtuts+">Cgtuts+</option> |
29 |
<option value="Phototuts+">Phototuts+</option> |
30 |
<option value="Mobiletuts+">Mobiletuts+</option> |
31 |
<option value="Webdesigntuts+">Webdesigntuts+</option> |
32 |
<option value="Wptuts+">Wptuts+</option> |
33 |
<option value="Mactuts+">Mactuts+</option> |
34 |
<option value="Gamedevtuts+">Gamedevtuts+</option> |
35 |
<option value="Crafttuts+">Crafttuts+</option> |
36 |
</optgroup>
|
37 |
</select>
|
You can see that HTML markup allows you to represent a parent/child relationship without having to insert special spacing and hyphenated lists.
Mobile
As mentioned, an advantage of using the select element is the access to native controls on mobile or touch screen devices. Here are some examples of what these menus would look like:
Conclusion
That's all there is to it! Just remember the optgroup element provides a more semantic and maintainable solution for categorizing groups of links in a select list. Whether or not you use a select menu for condensing website navigation on mobile devices is a decision you need to make as a designer; however, you now have an additional nugget of knowledge in your tool belt for mastering responsive web design!
Further Resources
- <optgroup> on Mozilla Developer Network
- <optgroup> specification by W3C
