Contextual links

Quickly access configuration of blocks, menus and more. A new design pattern in Drupal 7.

The concept

Drupal provides little context, when performing administrative tasks. You easily lose context of what you are working on, when you administer your site. Contextual links tries to reverse this by providing links to the administration features from the actual context, e.g. block or content.

We saw this pattern emerge in two popular community projects; Views and Zen. Both expose links to quickly access configuration. Understanding how it was used in the real world helped us shape the pattern we have in Drupal 7 now.

Designing it

Designing this interaction was about exploring known interaction models and adapting these to Drupal’s environment. Since Contextual Links were introduced very late in the development cycle, we had to be sure that the interaction model had already proven itself in the wild.

Roy Scholten designed the initial prototype. We found that showing the contextual action upon hover, and the actual links upon click, was least distracting.

Given that initial direction, the community pointed out several design constraints:

• Likely up to 6 links per context.
• No icons, as we don't know the actual link tasks.
• Links can appear on everything, everywhere, so don’t distract.

With those constraints we continued iterating and ended with two final prototypes, a vertically stacked and a horizontally stacked. During testing of both interactions, we found a major drawback of the horizontally stacked one: with more than two menu items it tends to lose its scan-ability.

The icon was a relatively easy choice, as we knew that these links where mostly about "configuration". It wasn't much of an "edit" action where a pen would suffice - therefore the cog was chosen.

Outline
To hint at which “object” a particular set of contextual links are related to, an outline appears to provide orientation. Designing this turned out to be an interesting challenge, as contextual links can appear very closely to each other. By only showing the outline upon hovering the icon, the orientation is kept intact.

State transition
Something we rarely do in Drupal, is state transitions. Which means to provide a state glue between the initial visual state and the final visual state of an element. Such small “animations” make Drupal feel more smooth and better, because it provides feedback on what is going on.

The contextual menu opens step-by-step in just a few milliseconds.

Recommendations using it

Themes
The styling of contextual links is fairly generic – they use a sensible default for themes to customize. Themes are encouraged to change details to better fit to the visual style of the theme. Especially darker themes might see a need to change the outline and backgrounds.

Modules
Modules have a great opportunity to bring configuration closer to the context. Contextual links should ideally be used by modules that expose extra configuration for an “element” (block, menu, node, anything). Views is a good example, as it exposes a link to “Edit view”.

However, make sure that only important and frequently used functionality is exposed in contextual links, to prevent them from getting overloaded with infrequently used actions:

• Use a short, descriptive link title. (2-3 words).
• Keep the action word at the beginning. (e.g. edit, delete, list).
• Avoid similar labels such as Edit menu and Edit menu links.
• Avoid more then 6 tasks.

Thanks to David Rothstein, Gábor Hojtsy, tha_sun, Charlie Gordon, seutje, catch, Roy Scholten and many more for working on this.