Discover how you can use HTML + CSS in your patterns.

Radial Menu

Also known as: Actions, Contextual-tools, Menu

Tags: contextual tools, selection

Radial menu provides available actions in a context-sensitive, circular popup menu made of several pie slices. It gets activated when the user clicks on an item that can be manipulated.

Songza provides radial menus for selecting from 4 actions that are available for the selected song.

Radial menu on Songza.
Source: http://www.songza.com/

Radial menu on Songza.

What problem does the pattern solve?

  • You need to provide tools for the user in context when he needs them.
  • There are actions on two levels.
    • In the Songza example main level items are “play”, “share”, “rate”, and “add to playlist”. Share and rate have second level actions that are shown when the user hovers over them.
  • There are 3-8 main level actions.

When to use it?

  • You need to provide tools for the user in context when he needs them.
  • There are actions on two levels.
    • In the Songza example main level items are “play”, “share”, “rate”, and “add to playlist”. Share and rate have second level actions that are shown when the user hovers over them.
  • There are 3-8 main level actions.

How to use it?

  • Show a radial menu when the user clicks an item that has actions.
  • Display commands as slices in a full circle or in an incomplete circle.
  • Add sub menus to parent menus if needed.
    • Sub menus don’t need to be in circular.
  • Clicking the center closes the menu.

Why to use it?

  • Radial menu, which is a contextual menu, is an effective way to provide available command choices to users. It offers only relevant commands that apply to the current selection.
  • It minimizes hand movement needed to access commands, making it fast to make a selection.
  • The UI stays lightweight as the tools are not shown to the user until he needs them.
+ Add

Useful linksUseful links icon

+ Add

Code snippetsCode snippets icon

+ Add

Example Images (2 examples)

Comments

  • There are no comments posted yet. Be the first one!