64x64 icon dark hosting
Choose a hosting plan here and get a free year's subscription to Tuts+ (worth $180).

Quick Tip: Don’t Forget the “optgroup” Element


Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)

This post is part of a series called Strange and Unusual HTML Tags.
Build a Custom HTML5 Video Player
Quick Tip: Consider Wrapping Your Code With a “figure” Element

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.


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:

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:

You can see that HTML markup allows you to represent a parent/child relationship without having to insert special spacing and hyphenated lists.


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:


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