Today, we released the Descriptive Menu Plugin on the WordPress.org plugin repository. This plugin allows us to display a menu with the menu item descriptions using a simple widget. It also provides an optional icon element. With simple and clean markup, you can easily style to make it look the way you need it to. Here’s an example of what we did with it:

The Widget

The Result

You can bring this functionality to your WordPress site with ease by downloading the plugin from the Descriptive Menu Widget’s WordPress Plugin repository page.

Use the following CSS selectors to style your Descriptive Menu:

#descriptive_menu-[id] This is the wrapper for the whole widget
#descriptive_menu-[id] .widget-title This is the title of the widget
#descriptive_menu-[id] .descriptive-menu This is the actual menu object
#descriptive_menu-[id] .descriptive-menu-link This is a span wrapper around the menu item anchor.
#descriptive_menu-[id] .descriptive-menu-icon This is an empty span you can use to display an icon. Add menu item classes to add specific icons for items.
#descriptive_menu-[id] .descriptive-menu-description This is the description paragraph tag.