jQuery UI: Menu Dividers

The jQuery UI menu widget has a great feature — one I should probably use more often — dividers. These dividers are great, speaking from the user perspective, because they allow me visually differentiate the various option groups within a menu. For example, printing options are grouped together while saving options are grouped together. And this is really easy to do in a jQuery UI menu. Although it's documented, it's not demonstrated. So allow me to provide an example, if you will.

Here, we're creating a basic menu with only four options. Obviously any menu that's part of a real application will have many options, and many groups of options, all helping the user feel warm and comfy. When we want a divider, all we need is:

<li>---</li>

That's it. The menu widget interprets this differently than other linked menu items, and renders the divider. It actually tests the content of the item using a regex and looks for dashes only, or spaces only. So we could just as easily have gone with:

<li>-</li>

or...

<li>   </li>

I find the triple dash approach the most readable and consistent.